Если вы пишете большое количество CSS кода, то препроцессор (например, SASS) поможет сэкономить много времени.
Используя такие инструменты, как Sass, Less, Stylus или PostCSS, вы сможете писать большие и сложные стили, которые проще понять и легче поддерживать. Благодаря таким функциям, как переменные, функции и пр. код становится более структурированным, что позволяет работать с ним быстрее и делать меньше ошибок.
Мы уже работали с препроцессорами раньше, как вы помните из статьи Изучаем препроцессор LESS за 10 минут. На этот раз мы собираемся рассказать вам о Sass.
1. Начало работы
Sass файлы не могут быть интерпретированы браузером, поэтому они нуждаются в компиляции к стандарту CSS, поэтому вам нужен какой-то инструмент, чтобы перевести .scss файлы в .css. Здесь у вас есть несколько вариантов:
- Самое простое решение - это он-лайн конвертер SASS в CSS SassMeister.
- Поискать в сети платные или бесплатные десктопные приложения.
- Вы можете установить Sass на компьютер и компилировать файлы вручную.
Вы можете установить Sass в своем первоначальном виде (написанном ruby) или вы можете попробовать Node.js порт (наш выбор). Вы можете воспользоваться компилятором libSass, но так как мы любим Node.js, мы будем работать с ним.
Вот как вы можете скомпилировать .scss файлы с помощью командной строки node:
node-sass input.scss output.css
Sass предлагает два различных синтаксиса - SASS и SCSS. SCSS более новый и считается лучшим, поэтому мы будем пользоваться им.
2. Переменные
Переменные в Sass работают также, как и в любом языке программирования. При определении переменной мы сохраняем внутри нее определенное значение, которое будет часто повторяться в CSS, например: цвета текста и тени, параметры шрифта. Ниже приводится простой пример. Переключайте вкладки, чтобы увидеть код SCSS и соответствующий ему CSS код.
Идея заключается в том, что в дальнейшем мы можем повторно использовать одни и те же значения и, если требуется изменение, мы можем прописать новое значение в одном месте (где была определена переменная), вместо того, чтобы править его вручную везде, где мы используют это свойство.
3. Примеси
Вы можете думать о примесях как упрощенном варианте конструктора классов в языках программирования - вы можете взять целую группу деклараций CSS и повторно использовать ее везде, где вы хотите, чтобы дать элементу определенный набор стилей.
Примеси также могут принимать аргументы с возможностью установки значений по умолчанию. В приведенном ниже примере мы определим примесь square, а затем используем ее для создания квадратов различных размеров и цветов.
Другой эффективный способ использовать примеси, - когда свойство требует префиксов для работы во всех браузерах.
4. Расширения
Следующая особенность, которую мы будем рассматривать, - это @extend
, которая позволяет наследовать свойства CSS одного селектора к другому. Расширения работают аналогично примесям, но является предпочтительными, когда мы хотим создать логическую связь между элементами на странице.
Расширения следует использовать, когда нам нужны аналогичным образом оформленные элементы, которые незначительно отличаются друг от друга. Например, давайте создадим две диалоговые кнопки - одна для подтвержедния, а вторая для отказа.
Если вы изучите версию CSS кода, вы увидите, что SASS, комбинируя селекторы вместо того чтобы повторять одни и те же декларации снова и снова, позволяет нам экономить драгоценную память.
5. Вложения
HTML представляют собой строгую вложенную структуру, тогда как в CSS чаще всего сплошной хаос. С SASS вы можете организовать таблицу стилей таким образом, что она будет в точности совпадать с HTML структурой, тем самым снижая вероятность CSS конфликтов.
Давайте по-быстрому напишем стили для списка, содержащего ряд ссылок:
Очень аккуратно и невосприимчиво к конфликтам.
6. Операции
С SASS вы можете сделать базовую математическую операцию прямо в таблице стилей, - это так же просто, как применение соответствующего арифметического символа.
Хотя CSS теперь немного подсластила пилюлю и также предлагает эту функцию в виде calc(), на SASS быстрее писать, кроме того, он имеет операцию %
(модуль числа) и может быть применен к более широкому диапазону типов данных (например, цвета и строки).
7. Функции
Sass предлагает большое количество встроенных функций. Они выполняют все типы задач, в том числе: управление строками, операции с цветами, а также некоторые удобные математические методы, например, random()
и round()
.
Для того, чтобы продемонстрировать простейшую функция SASS, мы создадим небольшой фрагмент кода, который использует darken($color, $amount)
для создания эффекта наведения.
Некоторые из перечисленных выше функций появятся в стандартном CSS, но пока их еще нет. В то же время, препроцессоры являются отличным способом улучшить CSS и Sass представляет собой отличный инструмент для этого.