Как изменить полосу прокрутки с помощью SASS/SCSS

Полоса прокрутки (скроллбар) – это один из тех компонентов пользовательского интерфейса, который встречается почти на каждой веб странице в сети, но несмотря на это, у нас (разработчиков) слишком мало контроля над этим элементом UI. Некоорые браузеры позволяют изменить внешний вид полосы прокрутки, но большинство браузеров, включая Firefox, не дают такой возможности.

Тем не менее, Chrome и Internet Explorer (да) позволяют добавлять пользовательские стили для скроллбаров, но синтаксис ужасно сложен и, конечно же, непривычен.

Возможно вы захотите воспользоваться этой небольшой SASS миксиной, чтобы с легкостью изменить свои полосы прокрутки.

/// Миксина для изменения внешнего вида скроллбара
/// Работает не во всех браузерах
/// @param {Length} $size - Высота горизонтального и скроллбара и ширина вертикального
/// @param {Color} $foreground-color - Цвет скроллбара
/// @param {Color} $background-color [mix($foreground-color, white, 50%)] - Цвет скроллбара
/// @example scss - Стили скроллбара
///   @include scrollbars(.5em, slategray);
@mixin scrollbars($size, $foreground-color, $background-color: mix($foreground-color, white,  50%)) {
  // Для Chrome
  ::-webkit-scrollbar {
      width:  $size;
      height: $size;
  }

  ::-webkit-scrollbar-thumb {
      background: $foreground-color;
  }

  ::-webkit-scrollbar-track {
      background: $background-color;
  }

  // Для Internet Explorer
  body {
    scrollbar-face-color: $foreground-color;
    scrollbar-track-color: $background-color;
  }
}

Пример

@include scrollbars(.5em, slategray);

See the Pen Sass mixin for scrollbar styling by Hugo Giraudel (@HugoGiraudel) on CodePen.

В обоих браузерах есть много вариантов для изменения размеров и цветов, но я не уверен, что они стоят того, чтобы захламлять ими миксину. Вы всегда можете поэксперементировать и создать свою собственную продвинутую миксину с большим количеством настроек.

Возможно, вам будет интересно:

SASS для Начинающих: Скачивание и Установка

SASS для Начинающих: Вложенные стили, Фрагменты, Импорт

Лучшие CSS Препроцессоры 2017

Оригинальный текст: Custom Scrollbar Mixin