ОСУШИТЕ свой CSS с помощью переменных, партиалов, миксинов, вложенности и функций

Препроцессор, такой как Sass или Less, может помочь сделать ваши таблицы стилей модульными и добавить множество полезных функций, которых не хватает в собственном CSS. Начать работу намного проще, чем вы думаете, поэтому вот краткий обзор настройки и часто используемых функций.

Быстрая установка

Проверьте конкретную установку для вашей установки, но для типичного проекта Node.js или React со стилями в папке src установка так же проста, как запуск npm install --save node-sass-chokidar * обертки без ошибок для node-sass. Затем в вашем package.json добавьте подscripts:

"scripts": {
   "build-css": "node-sass-chokidar src/ -o src/",
    "watch-css": "npm run build-css && node-sass-chokidar src/ -o   src/ --watch --recursive",

измените свои .css файлы на .scss и запустите npm run watch-css, и вы можете начать СУШКУ CSS следующим образом:

Переменные

Сохраните любое обычное значение CSS в переменной многократного использования, добавив $ variable-name:

$sky: skyblue;
$grass: lawngreen;
header {
  background-color: $sky;
}
footer {
  background-color: $grass;
}

Бонусной функцией переменных является их локальная область видимости в селекторах CSS, так что вы можете не беспокоиться о глобальном пространстве имен.

Частичные

Очистите свои файлы, разделив их на части, помеченные подчеркиванием, чтобы предупредить SCSS о частичной, например. _variables.scss, а затем поместите @import ‘variables' в начало любого базового файла, в котором вы будете использовать эти правила. Преимущество перед встроенным CSS @import в том, что ваш Sass компилирует все до одного CSS-файла, что сокращает HTTP-запросы и время загрузки страницы для пользователей.

Гнездование

Имитируя визуально вложенную иерархию HTML, которой нет в CSS, вы можете вложить свои стили в родительский элемент для большей ясности. Дочерние селекторы наследуют стили от своих родительских.

@import ‘variables';
.container {
   font-family: Arial, Helvetica, sans-serif;
  .child1 {
      color: $sky;
      font-size: 10px;
   }
  .child2 {
      color: $grass;
      font-size: 40px;
  }
}

Миксины + аргументы

Сгруппируйте общие пакеты объявлений CSS в @mixin, а затем повторно используйте их в своих файлах с помощью @include. При желании вы можете добавить аргументы и параметры по умолчанию, чтобы облегчить настройку. Например, простая кнопка:

@mixin button-color($color: green) {
  background-color: $color;
  color: white;
  text-align: center;
  font-size: 16px;
}
// example use of mixin below replacing default green with red
.green-btn {
  @include button-color();
}
.delete-btn {
  $red: #ff4500;
  @include button-color($red)
}

Функции

Хотя вы можете использовать свои собственные функции с помощью описанного выше метода @mixin, Sass поставляется с множеством предварительно созданных функций, готовых к использованию в любом файле SCSS. Пример нескольких интересных:

lighten($color, $amount) : Makes a color lighter
darken($color, $amount) : Makes a color darker
adjust-hue($color, $degrees) : Changes the hue of a color
mix($color1, $color2, [$weight]) : Mixes colors + weight of first
// also below return values of a color to use for conditionals
hue($color) : Gets the hue component of a color
saturation($color) : Gets the saturation component of a color
lightness($color) : Gets the lightness component of a color

Другими ключевыми особенностями Sass являются@function для создания ваших собственных функций и управляющих директив, таких как @if, @for, @each и @while, для управления логикой вашей функции. Также существует масса замечательных библиотек миксинов, таких как бурбон, точка останова (для медиа-запросов) и кнопки (для… кнопок). Как всегда, вы можете пойти настолько глубоко, насколько захотите, но вот несколько хороших ресурсов для получения дополнительной информации:

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