Препроцессоры CSS

Дата публикации: 09 июля 2022.

Что такое препроцессор

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

Для чего используются препроцессоры

Их использование позволяет сократить время на написание кода, а сам код автоматически привести к определенному виду. Также препроцессоры способны заменить или даже расширить функционал некоторых конструкций языка.

Основные понятия препроцессоров в контексте Sass

Переменные

Переменные являются одной из наиболее востребованных особенностей CSS, которую предлагает Sass. С помощью Sass можно определить переменные, а затем повторно использовать их по мере необходимости.
Переменные определяются знаком доллара ($), за которым следует имя переменной. Между именем переменной и значением идёт двоеточие и пробел ($font-base: 1em). Что касается значения переменной - это может быть число, строка, цвет, логическое значение, null или список значений, разделённых пробелами или запятыми.

Директивы

Для более сложной стилизации Sass поддерживает различные директивы управления.

Вычисления

Sass имеет возможность выполнять вычисления разными способами. Расчёты могут справиться с большинством задач, таких как сложение, вычитание, деление, умножение и округления.

Sass

width: 40px + 6 width: 40px - 6 width: 40px * 6 width: 40px % 6

Скомпилированный CSS

width: 46px; width: 34px; width: 240px; width: 4px;

Цвет

Sass предоставляет небольшую помощь в работе с цветом, предлагая несколько разных функций для изменения цвета и манипуляций с ним. Одной из наиболее популярных функций в Sass является возможность изменить шестнадцатеричный цвет или переменную и преобразовать его в значение RGBa.

Sass

color: rgba(#4ec74f, .55)

$green: #4ec74f color: rgba($green, .55)

Скомпилированный CSS

color: rgba(142, 198, 63, .55);

Примеси

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

Примеси определяются с помощью правила @mixin, за которым следуют любые возможные аргументы, затем идут любые правила стилей. Для вызова примеси внутри селектора используется знак плюс (+), за которым следует имя примеси и желаемые значения аргументов при необходимости. Аналогичным образом примеси (миксины) работают в Less.

Sass

@mixin btn($color, $color-hover) color: $color &:hover color: $color-hover

.btn +btn($color: #fff, $color-hover: #9744a7)

Скомпилированный CSS

.btn { color: #fff; } .btn:hover { color: #9744a7; }

Импорт

Одной из самых приятных особенностей препроцессоров является способность импортировать несколько файлов .scss, .sass, .less, .css или иных типов и сжимать их в один файл. Сжатие всех файлов в один позволяет использовать несколько таблиц стилей для лучшей организации, не беспокоясь о многочисленных HTTP-запросах.

Вместо того, чтобы ссылаться на все разные таблицы стилей внутри HTML-документа, ссылаемся только на один файл, который импортирует все остальные таблицы стилей.

В следующих примерах все три файла normalize.sass, fonts.sass и typography.sass компилируются в один файл. В этом случае, если файл Sass с именем styles.sass импортирует все остальные файлы, и он компилируется в styles.css, то в HTML-документе следует ссылаться только на styles.css.

Sass

@import "normalize" @import "fonts", "typography"

Скомпилированный HTML

<link href="/styles.css" rel="stylesheet">

Операторы

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

// Операторы сравнения 6 < 10 // истина 4 <= 60 // истина 8 > 2 // истина 10 >= 10 // истина // Операторы равенства #fff == white // истина 10 + 30 == 40 // истина normal != bold // истина

Функция if

Правило проверки выражения @if загружает стили под этим выражением, если оно возвращает что-то, кроме false или null. Начально выражение @if может быть дополнено несколькими выражениями @else if и одним @else. Как только выражение успешно определено, будут применены стили, непосредственно привязанные к нему. Особенности применения if зависят от препроцессоров, а также функционал отличается в зависимости от редакции препроцессора.

Sass

$demo: awesome

.shay @if $demo == awesome background: #ff6b25 @else if $demo == cool background: #0072cc @else background: #333

Скомпилированный CSS

.shay { background: #ff6b25; }

Цикл for

Правило @for выводит разные наборы стилей, основываясь на переменной счётчика. Есть две различные формы, доступные для циклов @for — to и through. Первый, к примеру, @for $i from 1 to 4 будет выводить стили до 4, не включая его. Другая форма, @for $i from 1 through 4 будет выводить стили до 4, включая его.

Sass

@for $col from 1 to 6 .col-#{$col} width: 50px * $col

Скомпилированный CSS

.col-1 { width: 50px; } .col-2 { width: 100px; } .col-3 { width: 150px; } .col-4 { width: 200px; } .col-5 { width: 250px; }

Цикл each

Достаточно просто, правило @each возвращает стили для каждого элемента в списке. Список может включать несколько элементов, разделённых запятыми.

Sass

@each $class in primer, demo, html, css .#{$class}-logo background: url("/img/#{$class}.jpg")

Скомпилированный CSS

.primer-logo { background: url("/img/primer.jpg"); } .demo-logo { background: url("/img/demo.jpg"); } .html-logo { background: url("/img/html.jpg"); }

.css-logo { background: url("/img/css.jpg"); }

Цикл while

Правило @while постоянно возвращает стили, пока выражение не станет ложным. Эта директива принимает несколько различных операторов, и переменная счётчика позволяет тонко контролировать точность цикла.

Sass

$heading: 1 @while $heading <= 6 h#{$heading} font-size: 2em - ($heading * .25em) $heading: $heading + 1

Скомпилированый CSS

h1 { font-size: 1.75em; } h2 { font-size: 1.5em; } h3 { font-size: 1.25em; } h4 { font-size: 1em; } h5 { font-size: 0.75em; } h6 { font-size: 0.5em; }

Функции

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

Например, в Sass функция percentage() превращает значение в проценты. Функция round() округляет значение до ближайшего целого числа, по умолчанию округляет вверх, где это необходимо. Функция ceil() округляет значение вверх до ближайшего целого числа, а функция floor() округляет значение вниз до ближайшего целого числа. И, наконец, функция abs() находит абсолютное значение заданного числа.

Sass

width: percentage(2.5) width: round(2.5px) width: ceil(2.5px) width: floor(2.5px) width: abs(-2.5px)

Скомпилированный CSS

width: 250%; width: 3px; width: 3px; width: 2px; width: 2.5px;

Компиляция кода препроцессора в чистый CSS

Существуют 4 основных метода компиляции кода в чистый CSS (на примере Less):

1. Компиляция в браузере

Наиболее простой способ использования CSS-препроцессора, но в тоже время мало популярный.

Основан на идее подключения стилей с расширением .less к документу, используя стандартный тег <link>, но с изменённым атрибутом rel. А также осуществляется подключение файла библиотеки.

<link rel="stylesheet/less" href="/..."> <script src="/less.min.js"></script>

После компиляции скрипт проводит инъекцию полученного CSS-кода в секцию head документа посредством тега <style>.

Способ не желателен к применению на так называемом «продакшене» в виду того, что имеет серьёзные проблемы со скоростью и сильно зависит от производительности устройства, а также скорости Интернет-соединения.

Помимо этого, увеличивается объем загружаемых данных, так как браузеру пользователя приходится загружать less-файлы и файл библиотеки. Только после полной загрузки необходимых ресурсов начинается процесс компиляции less-кода в CSS.

2. Компиляция из командной строки

Работа из командной строки предполагает наличие установленного Node.js. Помимо этого, необходимо глобально установить пакет less — это можно сделать командой:

$ npm install -g less

Компилирование файла _styles.less с сохранением результата в файл _main.css:

$ lessc _styles.less > _main.css

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

$ lessc -x _styles.less

3. Компиляция, используемая системы сборки

Система сборки — это инструмент для автоматической, гибкой и удобной сборки проектов из командной строки с использованием ранее обозначенных инструкций (задач).

Одним из самых актуальных сборщиков является Gulp. Для Gulp доступно большое количество различных пакетов, которыми можно выполнять практически любые задачи: от простейшего переименования файлов до сборки крупных приложений.

Webpack — это сборщик модулей JavaScript с открытым исходным кодом. Он создан в первую очередь для JavaScript, но может преобразовывать другие ресурсы, такие как HTML, CSS и изображения, если включены соответствующие загрузчики. Webpack принимает модули с зависимостями и генерирует статические ресурсы, представляющие эти модули. Для лучшей работы с препроцессорами есть специальные пакеты/модули.

4. Приложения для компиляции

Это самый простой и удобный способ для проектов, использующих препроцессоры, причём не только CSS-препроцессоры, но и JS и HTML.

Существуют такие приложения, которые позволяют управлять проектами без написания кода, использования командной строки и систем сборок.

Такие приложения имеют довольно обширный функционал и, как правило, умеют:

Компилировать файлы различных препроцессоров (Less, Stylus, Jade, CoffeeScript и т.д.);
Проверять файлы на ошибки и соответствие правилам (общим или проекта);
Обрабатывать файлы (минификация, расстановка префиксов в CSS и т.д.);
Автоматизировать некоторые часто используемые действия;
Локальный сервер для тестирования проектов на этапе разработки.

Среди всех подобных приложений можно выделить следующие решения:

Prepros
CodeKit (только OS X)
Mixture
Koala

Отличия препроцессоров, фреймворков и шаблонизаторов

Препроцессоры

CSS-препроцессор - это программа, позволяющая генерировать CSS-код, используя уникальный синтаксис, присущий только конкретному препроцессору.

По сути, препроцессоры - это отдельные скриптовые языки, у каждого из которых свое представление о том, как должен работать CSS, и свой стек возможностей (хоть и довольно часто пересекающихся между собой).

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

Фреймворки

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

Css-фреймворки сильно отличаются друг от друга и имеют разные подходы, но у них общие цели:

Основная цель - упростить и ускорить процесс разработки за счет уменьшения привычных для CSS сложностей с визуальным оформлением страниц.
Добавить в сайт или приложение проверенную кроссбраузерность и адаптивность.
Унификация используемых компонентов, следование определенным паттернам дизайна.
Сделать подключаемые к приложению стили более удобными с точки зрения поддержки.

Шаблонизаторы

Шаблонизатор - это инструмент, который позволяет проще писать разметку, делить её на компоненты и связывать с данными.

Главное преимущество шаблонизаторов - они избавляют от необходимости писать повторяющийся код несколько раз.

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

создание базовой разметки страниц;
внесение правок одновременно на нескольких страницах или компонентах;
изменение контента в блоках;
добавление, удаление или перенос блоков на страницах сайта;
создание повторяющегося контента, например, карточки товара в каталоге.

Препроцессоры в Visual Studio Code

Visual Studio Code - удобный и популярный редактор кода, в котором присутствует возможность установки плагинов, которые упрощают работу и экономят время в различных ситуациях, как и в препроцессинге.
Например, существует такой плагин, как Live Sass Compiler.

Он идеален для тех, кто работает с препроцессорами SASS/SCSS. Этот плагин поможет компилировать/преобразовывать файлы SASS/SCSS в файлы CSS в режиме реального времени с перезагрузкой браузера, вот все его основные функции:

Компиляция SASS & SCSS в реальном времени.
Настраиваемое расположение файла, экспортируемого CSS.
Настраиваемый экспортируемый стиль CSS (расширенный, компактный, сжатый, вложенный).
Настраиваемое имя расширения (.css или .min.css).
Автоматическая перезагрузка браузера после сохранения кода.
Поддерживается Autoprefix (утилита нового поколения для добавления префиксов к экспериментальным свойствам из CSS 3).

TailwindCSS — работа с препроцессорами

Tailwind CSS работает, сканируя все HTML-файлы, компоненты JavaScript и любые другие шаблоны на предмет имен классов, генерируя соответствующие стили и затем записывая их в статический CSS-файл.

Поскольку Tailwind - это плагин PostCSS, ничто не мешает использовать его с Sass, Less, Stylus или другими препроцессорами, как и с другими плагинами PostCSS, такими как Autoprefixer.

Чтобы использовать Tailwind с инструментом предварительной обработки, таким как Sass, Less или Stylus, необходимо добавить в проект дополнительный этап сборки, который позволит запускать предварительно обработанный CSS через PostCSS.

Самое важное, что нужно понимать при использовании Tailwind с препроцессором, - это то, что препроцессоры, такие как Sass, Less и Stylus, запускаются отдельно перед Tailwind. Это означает, что нельзя передать вывод функции Tailwind theme(), например, в цветовую функцию Sass, потому что функция theme() фактически не оценивается, пока Sass не будет скомпилирован в CSS и передан в PostCSS.

Не будет работать, сначала обрабатывается Sass:

.alert { background-color: darken(theme('colors.red.500'), 10%); }

Помимо этого, каждый препроцессор имеет свои собственные причуды при использовании с Tailwind, обходные пути которых описаны ниже.

Sass

При использовании Tailwind с Sass использование !important с @apply требует, чтобы использовалась интерполяция для правильной компиляции.

Не будет работать, на что жалуется Sass !important:

.alert { @apply bg-red-500 !important; }

Использовать интерполяцию как обходной путь:

.alert { @apply bg-red-500 #{!important}; }

Less

При использовании Tailwind с Less нельзя вложить директиву Tailwind @screen.

Не будет работать, Less не понимает, что это медиа-запрос:

.card { @apply rounded-none;

@screen sm { @apply rounded-lg; } }

Вместо этого нужно использовать обычный медиа-запрос вместе с функцией theme() для ссылки на размеры вашего экрана или просто не вкладывать свои директивы @screen.

Использовать обычный медиа-запрос и theme():

.card { @apply rounded-none;

@media (min-width: theme('screens.sm')) { @apply rounded-lg; } }

Используйте директиву @screen на верхнем уровне:

.card { @apply rounded-none; } @screen sm { .card { @apply rounded-lg; } }

Stylus

При использовании Tailwind со Stylus нет возможности использовать функцию Tailwind @apply, не заключив все правило CSS в @css, чтобы Stylus воспринимал его как буквальный CSS:

Не сработает, Stylus жалуется на @apply:

.card { @apply rounded-lg bg-white p-4 }

Используйте @css, чтобы избежать обработки как Stylus:

@css { .card { @apply rounded-lg bg-white p-4 } }

Однако это требует значительных затрат, а именно: нет возможности использовать какие-либо функции стилуса внутри блока @css.

Другой вариант - использовать функцию theme() вместо @apply и записать фактические свойства CSS в длинной форме.

Используйте theme() вместо @apply:

.card { border-radius: theme('borderRadius.lg'); background-color: theme('colors.white'); padding: theme('spacing.4'); }

Вдобавок к этому Stylus не поддерживает вложение директивы @screen (как и Less)

Не сработает, Stylus не понимает, что это медиа-запрос:

.card { border-radius: 0;

@screen sm { border-radius: theme('borderRadius.lg'); } }

Вместо этого нужно использовать обычный медиа-запрос вместе с функцией theme() для ссылки на размеры экрана или просто не вкладывать свои директивы @screen.

Использовать обычный медиа-запрос и theme():

.card { border-radius: 0;

@media (min-width: theme('screens.sm')) { border-radius: theme('borderRadius.lg'); } }

Использовать директиву @screen на верхнем уровне:

.card { border-radius: 0; } @screen sm { .card { border-radius: theme('borderRadius.lg'); } }