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

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

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

Кроме того, 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.

LESS был выпущен в 2009 году, поддерживает переменные, вложенные правила и миксины. Но он имеет менее сложный синтаксис, чем Sass, что делает его простым для изучения и использования.
Подобно Sass, LESS является самостоятельным препроцессором, его код компилируется в обычный CSS. Для компиляции используют LESS CLI или плагины, интегрированные в систему сборки проекта.
Препроцессор bмеет схожие с Sass базовые функции. Но LESS обладает дополнительными возможностями — в нём можно поднимать переменные, извлекать определённые компоненты из цвета, например, оттенок, насыщенность, яркость и контрастность.
В коде одно и то же свойство может повторяться множество раз. Переменные облегчают поддержку кода, предоставляя возможность управлять свойствами из одного места. Любая переменная в LESS инициализируется как директива, с использованием символа @
в начале.
Переменные можно использовать, например, в именах селекторов или свойств, URL-адресах и операторах @import
.
// Variables
@my-selector: banner;
// Usage
.@{my-selector} {
font-weight: bold;
line-height: 40px;
margin: 0 auto;
}
С помощью LESS этот пример компилируется в CSS:
.banner {
font-weight: bold;
line-height: 40px;
margin: 0 auto;
}
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 {
font: 14px "Lucida Grande", Arial, sans-serif;
}
Он добавляет множество функций — переменные, вложенные правила, миксины и наследование стилей. Stylus также имеет мощный набор своих функций, в том числе операторы, условные выражения и циклы.
У Stylus не такая обширная база пользователей, как у LESS и Sass. У него 11 100 звёзд на github.com и больше 3 миллионов скачиваний в неделю.

Stylus удобен для работы и имеет свои преимущества. Его отличает гибкость — работая в нём, можно не использовать двоеточия, точки с запятой и запятые. Например, так будет выглядеть задание свойств сразу для нескольких селекторов:
textarea, input
border 1px solid #eee
Также не нужны фигурные скобки для определения блоков, вместо них используются отступы. Для переменных, как и в Sass, применяется знак $.
$font-size = 14px
body {
font: $font-size sans-serif;
}
Эти особенности позволяют разработчику сокращать время написания и создавать чистый код. Но в такой гибкости есть недостаток — при работе над крупным проектом код становится сложным для восприятия, так как отсутствуют чёткие разделители и идентификаторы.
Инструмент 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-кода.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше

Как размыть фон под элементом с помощью backrop-filter
В сентябре 2024 в Baseline в статусе Widely-available вошло CSS-свойство backdrop-filter
. Оно делает красивое: позволяет применить фильтры (размытие, контраст, яркость, и прочее) к фону за элементом. Не к самому элементу, а именно к тому, что за ним — это важно.
То есть если у вас есть модальное с полупрозрачным фоном, вы можете сделать так, чтобы то, что под ней, красиво размывалось, как в macOS или на айфоне. Это и есть главное применение backdrop-filter
.
Пример минимального кода:
<div class="glass-panel">Контент</div>
.glass-panel {
backdrop-filter: blur(10px);
background-color: rgba(255, 255, 255, 0.3);
}
Чтобы это работало, у элемента должен быть фон с прозрачностью (например, rgba или hsla), иначе фильтр не виден. И да, backdrop-filter
визуально различим только если элемент реально перекрывает что-то.
- 5 мая 2025

Справочник по новым математическим функциям CSS
За последние годы в CSS добавилось много математических функций, для которых не нужен JavaScript. Их можно использовать в анимациях, в графиках для визуализации данных или просто для создания красивых пользовательских интерфейсов.
Эта статья — справочник, который вы можете добавить в закладки и обращаться по мере необходимости. А подробно ознакомиться с работой математических функций можно в интерактивной демонстрации в HTML Academy.
Статья дополняется.
- 28 апреля 2025

CSS Scroll-Driven Animations: что это, зачем нужно и как начать пользоваться
Раньше, чтобы анимировать что-то при прокрутке, приходилось писать JavaScript. Слушать события scroll
, вычислять позиции элементов, руками задавать стили. Это было сложно и работало неэффективно. Но в 2025 в CSS появилась нормальная нативная поддержка скролл-анимаций.
Частичная поддержка есть в Chrome 115+, Edge 115+ и Opera 117+, с флагами — в Firefox 110+. Ждём ещё Safari.
Внимание! Все примеры в этой статье работают только в Chrome 116+.
- 27 апреля 2025

Анимация по любой траектории с offset-path
У вас же было такое, что ждёте курьера или доставку, а их всё нет и нет? Заходите сайт, обновляете статус, а там «В пути» и больше никакой информации. У нас вот было много раз.
В хороших случаях курьера рисуют прямо на карте, и показывают, где он едет, где проехал, и прямо анимацией можно всё рассмотреть.
- 18 апреля 2025

Автоматическая тёмная тема: новая CSS-функция light-dark()
CSS-функция light-dark()
облегчает жизнь при поддержке светлой и тёмной темы. Раньше, чтобы задать разные стили для разных тем, приходилось писать медиа-выражения вроде @media (prefers-color-scheme: dark)
и дублировать одни и те же куски стилей с поправками на цвет. Это работало, но выглядело избыточно и громоздко, особенно когда надо было поменять всего один цвет. Для системности создавались CSS-переменные — например, --text-color
, значение которой менялось внутри медиавыражения. Всё это работало, но напоминало церемонию ради церемонии.
С light-dark()
всё стало проще. Это функция, которая на лету подставляет значение в зависимости от активной темы. Если у пользователя включена светлая тема, функция вернёт первое значение. Если тёмная — второе. Пример: color: light-dark(black, white)
— в светлой теме будет чёрный текст, в тёмной — белый. Всё. Никаких переменных, никаких @media
. Просто одно свойство и два значения — читаемо, логично, компактно.
- 23 апреля 2024

Псевдокласс :link
Псевдокласс :link
в CSS предназначен для стилизации ссылок, которые ещё не были посещены пользователем. Этот псевдокласс позволяет разработчикам задавать внешний вид для непосещенных ссылок отдельно от тех, по которым пользователь уже переходил, что помогает лучше ориентироваться на странице и повышает удобство использования сайта.
Пример использования псевдокласса :link
для стилизации непосещенных ссылок:
a:link {
color: #007bff;
text-decoration: none;
}
В данном примере для всех непосещенных ссылок устанавливается синий цвет (#007bff
) и убирается подчеркивание. Это делает внешний вид ссылок более аккуратным и одновременно информативным, поскольку пользователь может легко отличить их от уже посещенных (:visited
) ссылок.
При работе с :link
, важно помнить, что этот псевдокласс должен использоваться в сочетании с псевдоклассом :visited
для полной стилизации состояний ссылок. Также рекомендуется определять стили для псевдоклассов :hover
и :active
, чтобы обеспечить интерактивный и отзывчивый интерфейс.
Пример полного набора стилей для ссылок:
a:link {
color: #007bff;
text-decoration: none;
}
a:visited {
color: #666;
}
a:hover {
color: #0056b3;
text-decoration: underline;
}
a:active {
color: #ff0000;
}
В этом примере задаются различные стили для всех возможных состояний ссылок: :link
для непосещённых, :visited
для посещённых, :hover
при наведении курсора и :active
в момент нажатия на ссылку. Такой подход позволяет создать более динамичный и интуитивно понятный интерфейс веб-страницы.
- 4 апреля 2024

Селектор потомков (пробел)
Селектор потомков в CSS используется для выбора элементов, которые являются потомками другого элемента в структуре документа. Этот селектор обозначается простым пробелом между двумя селекторами и позволяет применить стили к элементам, находящимся внутри других элементов, независимо от глубины их вложенности.
Пример использования селектора потомков:
article p {
color: #333;
line-height: 1.6;
}
В данном примере все абзацы (<p>
), которые находятся внутри элемента <article>
, будут окрашены в темно-серый цвет и получат межстрочный интервал в полтора размера шрифта. Селектор потомков позволяет легко управлять стилем конкретных элементов, сохраняя при этом общую структуру и читаемость кода.
Селектор потомков особенно полезен в следующих случаях:
- Структурирование контента: Помогает стилизовать элементы внутри определенных секций или компонентов, не затрагивая похожие элементы в других частях страницы.
- Тематическое оформление: Используется для применения уникальных стилей к элементам, расположенным внутри определенных контейнеров, например, для статей, сайдбаров или футеров.
- Изоляция стилей: Обеспечивает локальное применение стилей, предотвращая их случайное распространение на другие элементы документа.
Применение селектора потомков упрощает создание модульной и легко поддерживаемой структуры стилей, позволяя разработчикам более точно и гибко управлять внешним видом веб-страницы.
Однако, важно соблюдать баланс и избегать слишком глубокой вложенности селекторов, так как это может усложнить поддержку и оптимизацию кода. Рекомендуется использовать селектор потомков с умом, ориентируясь на поддержание чистоты и простоты структуры CSS.
- 4 апреля 2024

Псевдокласс :focus
Псевдокласс :focus
в CSS используется для стилизации элементов, которые получили фокус. Это может быть, например, текстовое поле в форме, к которому пользователь переместил курсор для ввода, или ссылка, выбранная через клавиатурный ввод. Псевдокласс :focus
позволяет создать более интерактивный и доступный пользовательский интерфейс, подсвечивая активные или выбранные элементы.
Пример использования :focus
:
input:focus {
border: 2px solid blue;
background-color: lightblue;
}
В этом примере для всех текстовых полей (input
) при получении фокуса будет изменяться цвет границы на синий и фоновый цвет на светло-синий. Это обеспечивает наглядную обратную связь пользователю о том, какой элемент формы активен в данный момент, улучшая общую пользовательскую доступность и удобство использования интерфейса.
Псевдокласс :focus
особенно важен для:
- Улучшения доступности: Он помогает пользователям с ограниченными возможностями или теми, кто использует клавиатурный ввод вместо мыши, понимать, какой элемент управления в данный момент активен.
- Повышения интерактивности: Визуальное отличие активных элементов делает интерфейс более дружелюбным и понятным для пользователя.
- Создания стилистических акцентов: Позволяет добавлять уникальные стилистические особенности для интерактивных элементов интерфейса, подчеркивая их функциональность.
Применение :focus
в сочетании с другими псевдоклассами, такими как :hover
и :active
, позволяет создать комплексное визуальное представление различных состояний элементов управления, делая интерфейс более интуитивно понятным и приятным в использовании.
Однако, важно помнить, что стилизация элементов при помощи :focus
должна быть достаточно заметной, чтобы пользователь мог легко идентифицировать фокусируемый элемент, но при этом не должна быть слишком навязчивой, чтобы не отвлекать от общего восприятия интерфейса.
- 4 апреля 2024

Селектор по id
CSS-селектор по идентификатору (id
) позволяет стилизовать элементы веб-страницы, которые имеют уникальный идентификатор. Использование селектора по id
делает возможным точечное применение стилей к конкретному элементу, не затрагивая другие элементы на странице.
Селектор по id
обозначается знаком решетки (#
) перед именем идентификатора. Идентификаторы в HTML должны быть уникальными в пределах документа, что делает селектор по id
мощным инструментом для стилизации конкретных элементов.
Пример использования селектора по id
:
<div id="uniqueElement">Этот элемент уникален.</div>
#uniqueElement {
color: green;
font-size: 20px;
}
В этом примере элементу <div>
с id="uniqueElement"
присваиваются стили, делающие текст зеленым и увеличивающие размер шрифта до 20 пикселей. Эти стили будут применены только к этому конкретному элементу благодаря уникальности идентификатора.
Преимущества использования селектора по id
:
- Точечная стилизация: Селектор по
id
позволяет применять стили к конкретному элементу, не влияя на другие элементы. - Высокий приоритет: Стили, примененные через селектор по
id
, имеют более высокий приоритет, чем стили, примененные через классы и теги, что облегчает переопределение стилей.
Важно помнить:
- Идентификатор должен быть уникальным в пределах всего HTML-документа.
- Злоупотребление селекторами по
id
может сделать CSS-код сложным для поддержки, особенно в больших проектах. Рекомендуется использовать их с умом, предпочитая классы для стилизации, когда это возможно. - Селекторы по
id
могут увеличить специфичность CSS-правил, что иногда затрудняет их переопределение.
Использование селектора по id
является мощным инструментом в арсенале веб-разработчика, позволяя точечно влиять на стиль отдельных элементов страницы.
- 4 апреля 2024

Несколько селекторов через запятую
Список селекторов в CSS представляет собой перечень селекторов, разделенных запятыми, что позволяет применить один и тот же набор стилей к различным элементам веб-страницы. Этот метод упрощает написание CSS-кода, избавляя от необходимости дублировать стили для каждого типа элементов отдельно.
Пример использования списка селекторов для стилизации заголовков, абзацев и элементов списка:
h1, h2, p, li {
color: #333;
font-family: 'Arial', sans-serif;
}
В этом примере все заголовки первого и второго уровней, абзацы и элементы списка (<li>
) окрашиваются в темно-серый цвет (#333
) и стилизуются шрифтом Arial. Использование списка селекторов позволяет значительно сократить количество кода, необходимого для применения общих стилей к разным элементам.
Применение списка селекторов эффективно во многих ситуациях, включая:
- Применение базовых стилей текста (цвет, шрифт, размер) к различным типам элементов.
- Сброс стандартных отступов для элементов списка, параграфов и других блочных элементов.
- Установка общих стилей для интерактивных элементов, таких как кнопки и ссылки, в различных частях веб-страницы.
При работе с списком селекторов важно учитывать, что стили будут применены ко всем указанным элементам. Для более специфичных стилевых задач следует использовать классы или идентификаторы, а также более конкретные типы селекторов.
Списки селекторов улучшают читаемость и поддерживаемость CSS-кода, позволяя разработчикам более эффективно управлять стилями веб-страницы. Этот подход способствует сокращению дублирования кода и обеспечивает более упорядоченную структуру стилей.
- 4 апреля 2024