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

CSS препроцессор

CSS препроцессор (CSS preprocessor) — это программа, которая имеет свой собственный синтаксис (syntax (en-US)), но может сгенерировать из него CSS код . Существует множество препроцессоров. Большинство из них расширяет возможности чистого CSS, добавляя такие опции как: примеси, вложенные правила, селекторы наследования и др. Эти особенности облегчают работу с CSS: упрощают чтение кода и его дальнейшую поддержку.

Для использования CSS препроцессора нужно установить CSS компилятор на ваш веб-сервер (server (en-US)).

Узнать больше

Общие знания

Несколько самых популярных CSS препоцессоров:

Found a content problem with this page?

Edit the page on GitHub.
Report the content issue.
View the source on GitHub.

This page was last modified on 12 нояб. 2023 г. by MDN contributors.

Your blueprint for a better internet.

Препроцессоры в CSS: что это и для чего нужны

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

Применение препроцессоров в CSS

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

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

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

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

Основные задачи CSS-препроцессоров

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

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

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

Разновидности CSS-препроцессоров

В разработке используется три популярных препроцессора:

Более подробно каждый из них рассмотрим дальше в статье.

Дополнительно можно выделить еще препроцессоры, используемые в узких кругах: Closure Stylesheets и CSS Crush. Разработчику есть смысл знакомиться с ними только для решения определенных задач, которые встречаются очень редко, поэтому тратить время на их изучение начинающему верстальщику бессмысленно.

Почему стоит использовать препроцессоры

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

Возможность записать код короче

В стандартном CSS нет возможности делать вложенности, создавать переменные. Это сильно усложняет написание большого объема стилей, создает необходимость дублировать одинаковые участки кода, а также помнить название всех ID и классов. Благодаря препроцессорам разработчик:

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

Легкость изучения

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

Простота применения

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

Логичная и понятная структура

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

Родительский селектор 1
Вложенный селектор 1.1
Вложенный селектор 1.2
Вложенный селектор 1.2.1
Вложенный селектор 1.2.2

Пример синтаксиса препроцессора

Пример синтаксиса препроцессора

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

Добавление миксинов

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

Пример использования миксинов

Пример использования миксинов

Модули

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

Преимущества и недостатки препроцессоров

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

Преимущества:

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

Недостатки:

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

Заключение

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

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

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

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

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

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

Переменные

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

Директивы

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

Вычисления

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

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

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

Цвет

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

color: rgba(#4ec74f, .55)

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

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

Примеси

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

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

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

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

Импорт

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

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

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

@import «normalize»
@import «fonts», «typography»

Операторы

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

// Операторы сравнения
6 < 10 // истина
4 8 > 2 // истина
10 >= 10 // истина

// Операторы равенства
#fff == white // истина
10 + 30 == 40 // истина
normal != bold // истина

Функция if

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

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

.shay background: #ff6b25;
>

Цикл for

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

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

Цикл each

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

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

.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 постоянно возвращает стили, пока выражение не станет ложным. Эта директива принимает несколько различных операторов, и переменная счётчика позволяет тонко контролировать точность цикла.

$heading: 1
@while $heading h#
font-size: 2em — ($heading * .25em)
$heading: $heading + 1

Функции

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

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

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

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

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

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

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

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

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

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

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

Помимо этого, увеличивается объем загружаемых данных, так как браузеру пользователя приходится загружать 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;
>

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

Less

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

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

.card @apply rounded-none;

Вместо этого нужно использовать обычный медиа-запрос вместе с функцией 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’);
>
>

Ваш запрос или вопрос по теме:

Как ускорить вёрстку на CSS. Обзор главных препроцессоров в 2023

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

Одна из важных задач препроцессоров — упростить и ускорить процесс разработки и поддержку стилей в проекте.

В обзоре рассмотрим наиболее популярные препроцессоры в 2023 году и расскажем, как выбрать подходящий.

Препроцессор Sass

Sass (Syntactically Awesome Style Sheets) — один из первых CSS-препроцессоров, создан в 2007 году и имеет большое сообщество разработчиков. На github.com у Sass 3500 звёзд, еженедельно препроцессор скачивает более одиннадцати миллионов разработчиков:

Источник npmjs.com

Sass расширяет возможности CSS, добавляя вложенные правила, использование ссылки на родительский селектор, вложенные свойства, шаблонные селекторы.

Sass позволяет вкладывать правила CSS друг в друга. Благодаря этому, родительские селекторы не повторяются и CSS-файлы со множеством вложенных селекторов становятся понятнее:

Источник sass-scss.ru

Среди CSS-свойств существует разные пространства имён, например, font . Чтобы каждый раз не вводить пространство имён при указании свойства, с помощью Sass можно указать пространство один раз, и затем добавлять нужные свойства:

Источник sass-scss.ru

Кроме того, Sass предоставляет возможность использовать операторы и функции, что весьма упрощает написание и поддержку CSS.

Это самостоятельный препроцессор, который не требует установки дополнительных инструментов. Его можно использовать с любым проектом, который применяет CSS, и компилировать с помощью инструмента Sass CLI или плагинов для сборки.

Препроцессор имеет два отдельных синтаксиса — Sass и SCSS.

Sass (Syntactically Awesome Style Sheets) — упрощённый синтаксис CSS, считается устаревшим. Он использует отступы вместо фигурных скобок, они указывают на вложение селекторов. Новые строки заменяют точки с запятой для разделения свойств:

@mixin button-base() @include typography(button) @include ripple-surface @include ripple-radius-bounded display: inline-flex position: relative height: $button-height border: none vertical-align: middle &:hover cursor: pointer &:disabled color: $mdc-button-disabled-ink-color cursor: default pointer-events: none

SCSS (Sassy CSS) — основан на стандартном для CSS синтаксисе.

@mixin button-base() < @include typography(button); @include ripple-surface; @include ripple-radius-bounded; display: inline-flex; position: relative; height: $button-height; border: none; vertical-align: middle; &:hover < cursor: pointer; >&:disabled < color: $mdc-button-disabled-ink-color; cursor: default; pointer-events: none; >>

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

Препроцессор LESS

LESS — это тоже распространённый препроцессор, у него 16 900 звёзд на github.com и около 5 миллионов скачиваний в неделю на npmjs.com.

Источник npmjs.com

LESS был выпущен в 2009 году, поддерживает переменные, вложенные правила и миксины. Но он имеет менее сложный синтаксис, чем Sass, что делает его простым для изучения и использования.

Подобно Sass, LESS является самостоятельным препроцессором, его код компилируется в обычный CSS. Для компиляции используют LESS CLI или плагины, интегрированные в систему сборки проекта.

Препроцессор bмеет схожие с Sass базовые функции. Но LESS обладает дополнительными возможностями — в нём можно поднимать переменные, извлекать определённые компоненты из цвета, например, оттенок, насыщенность, яркость и контрастность.

В коде одно и то же свойство может повторяться множество раз. Переменные облегчают поддержку кода, предоставляя возможность управлять свойствами из одного места. Любая переменная в LESS инициализируется как директива, с использованием символа @ в начале.

Переменные можно использовать, например, в именах селекторов или свойств, URL-адресах и операторах @import .

// Variables @my-selector: banner; // Usage .@

С помощью LESS этот пример компилируется в CSS:

.banner

LESS используют множество разработчиков, он имеет широкий набор функций, быстрый и эффективный в использовании.

Препроцессор Stylus

Stylus — CSS-препроцессор, написанный на Node.js, создан в 2010 году. Использует синтаксис, похожий на Python.

font-size = 14px font-stack = "Lucida Grande", Arial, sans-serif body font font-size font-stack //Компилируется в CSS: body

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

У Stylus не такая обширная база пользователей, как у LESS и Sass. У него 11 100 звёзд на github.com и больше 3 миллионов скачиваний в неделю.

Источник npmjs.com

Stylus удобен для работы и имеет свои преимущества. Его отличает гибкость — работая в нём, можно не использовать двоеточия, точки с запятой и запятые. Например, так будет выглядеть задание свойств сразу для нескольких селекторов:

textarea, input border 1px solid #eee

Также не нужны фигурные скобки для определения блоков, вместо них используются отступы. Для переменных, как и в Sass, применяется знак $.

$font-size = 14px body

Эти особенности позволяют разработчику сокращать время написания и создавать чистый код. Но в такой гибкости есть недостаток — при работе над крупным проектом код становится сложным для восприятия, так как отсутствуют чёткие разделители и идентификаторы.

Инструмент PostCSS

PostCSS — это инструмент, который позволяет преобразовывать CSS с помощью плагинов. Его выпустили в 2013 году, и сейчас он существует в 7 версии. Он не добавляет новый синтаксис, как Sass или LESS, но предоставляет возможность модифицировать CSS с помощью JavaScript-плагинов.

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

PostCSS также интегрируется с различными сборщиками проектов, например, с Webpack или Gulp, и позволяет автоматически запускать компиляцию CSS при изменении исходного кода, что делает его гибким и удобным в использовании.

Какой препроцессор выбрать

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

Если вы новичок, то лучше начать с простых препроцессоров, таких как Sass или LESS. Эти препроцессоры имеют более простой синтаксис, чем чистый CSS, большое сообщество, которое может помочь со сложными вопросами. Если вы опытный разработчик, то PostCSS — хороший выбор, так как он предоставляет более широкие возможности настройки и оптимизации.

�� Новичкам — Sass или LESS, опытным — PostCSS

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

�� Для большого проекта — Sass или LESS, для маленького — PostCSS

Если вам нужно оптимизировать CSS-код, то PostCSS может быть лучшим выбором, так как он предоставляет множество плагинов для оптимизации CSS.

�� Для оптимизации кода — PostCSS

Некоторые разработчики выбирают более традиционные препроцессоры Sass или LESS, в то время как другие предпочитают гибкий инструмент PostCSS. Выбор препроцессора основывается на опыте и личных предпочтениях разработчика.

�� Если нужен более гибкий инструмент — PostCSS

Важно учитывать, что не все препроцессоры поддерживаются инструментами сборки проектов и CMS. Например, если вы работаете с WordPress, то удобнее использовать препроцессоры, которые легко интегрируются с этой CMS — Sass или LESS.

�� Если работаете с WordPress — Sass или LESS

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

�� При работе в команде — выбор согласуется со всеми

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

Материалы по теме

В каких браузерах тестировать вёрстку в 2023
10 библиотек для CSS и JS анимации
Обзор цветовых форматов в CSS

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

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

CSS препроцессор

Узнать больше

Общие знания

Found a content problem with this page?

Препроцессоры в CSS: что это и для чего нужны

Применение препроцессоров в CSS

Основные задачи CSS-препроцессоров

Разновидности CSS-препроцессоров

Почему стоит использовать препроцессоры

Возможность записать код короче

Легкость изучения

Простота применения

Логичная и понятная структура

Добавление миксинов

Модули

Популярные CSS-препроцессоры

Препроцессор LESS

Препроцессор SASS

Препроцессор Stylus

Преимущества и недостатки препроцессоров

Заключение

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

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

Популярные препроцессоры и их характеристики

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

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

Как ускорить вёрстку на CSS. Обзор главных препроцессоров в 2023

Препроцессор Sass

Препроцессор LESS

Препроцессор Stylus

Инструмент PostCSS

Какой препроцессор выбрать

Материалы по теме

Добавить комментарий Отменить ответ