ОСУШИТЕ свой 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
, для управления логикой вашей функции. Также существует масса замечательных библиотек миксинов, таких как бурбон, точка останова (для медиа-запросов) и кнопки (для… кнопок). Как всегда, вы можете пойти настолько глубоко, насколько захотите, но вот несколько хороших ресурсов для получения дополнительной информации:
- Sass Docs
- Курс Front End Master Майка Норта + бесплатная презентация
- Руководство по основам Sass для новичков Далласа Белинга
- Статья Самуэля Олорунтобы о миксинах на scotch.io
Важно отметить, что другие препроцессоры, такие как Less и Stylus, обладают аналогичной функциональностью, так что проверьте и их. Спасибо за чтение и надеюсь, что это поможет вам начать работу.