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

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

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

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

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

Общие знания

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

Help improve MDN

Was this page helpful to you?
Learn how to contribute. This page was last modified on 12 нояб. 2023 г. by MDN contributors.

• MDN on Mastodon
• MDN on X (formerly Twitter)
• MDN on GitHub
• MDN Blog RSS Feed

MDN

Support

• Product help
• Report an issue

Our communities

Developers

• Web Technologies
• Learn Web Development
• MDN Plus
• Hacks Blog

• Website Privacy Notice
• Cookies
• Legal
• Community Participation Guidelines

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2024 by individual mozilla.org contributors. Content available under a Creative Commons license.

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

4 лучших препроцессора CSS для ускорения веб-верстки

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

Веб-разработка
10 окт. 2023

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

Sass или Sassy CSS

Широко известный во всем мире инструмент Sass был создан в уже далеком 2007 году и до сих пор остается одним из самых популярных CSS-препроцессоров.

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

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

LESS

Еще одним довольно популярным CSS-препроцессором является созданный в 2009 году LESS. Его базовый функционал похож на Sass, но у LESS есть также дополнительные полезные возможности. К примеру, здесь можно:

1. Вызывать переменные для имен свойств и селекторов, операторов и URL-адресов. Это упрощает поддержку кода и управление свойствами
2. Выделять отдельные параметры цвета (цифровой код оттенка, значения контрастности, насыщенности, яркости)

Stylus

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

• переменные
• миксины
• вложенные правила
• наследование стилей
• условные выражения
• операторы
• циклы

1. Необязательно использовать запятые, двоеточия, точки с запятой
2. Для определения блоков вместо фигурных скобок используются отступы
3. Переменные задаются через знак $, как в Sass

PostCSS

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

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

Какой CSS-препроцессор выбрать для работы?

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

• Новичкам лучше начинать с LESS или Sass, где проще синтаксис и развитое комьюнити, всегда готовое ответить на возникающие в процессе работы вопросы. Программа нашего курса «Frontend-разработчик» также предусматривает изучение обоих указанных препроцессоров
• Опытным Frontend-разработчикам можно выбрать PostCSS с его широкими возможностями для оптимизации и настройки кода
• Для крупных проектов лучше подходят Sass и LESS, препроцессоры со структурированным синтаксисом, через который легче управлять объёмным кодом
• Для небольших и средних проектов отлично подходят гибкие Stylus и PostCSS
• При необходимости оптимизировать существующий код лучше использовать PostCSS с большим набором соответствующих плагинов
• Учитывайте возможность интеграции препроцессора с CMS и сборщиками проектов. К примеру, для создания сайтов на WordPress стоит выбрать Sass или LESS, которые хорошо интегрируются с данной CMS

Заключение

Умение работать с популярными CSS-препроцессорами сэкономит немало рабочего времени всем, кто занимается веб-версткой и Frontend-разработкой. Обязательно освойте эти инструменты, если пока этого не сделали, и вы увидите, как сильно вырастет ваша продуктивность. Или приходите на наш курс «Frontend-разработчик», чтобы освоить их под руководством опытных разработчиков.

За что ты послал нам препроцессоры? Чем мы тебя прогневали?

В наших проектах в Коде мы используем простой CSS-код. Он компактный и понятный. Но у нас маленькие проекты.

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

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

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

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

И вот у всех этих элементов сейчас стоит параметр border-radius: 7px, то есть скругление по углам — семь пикселей. И вдруг приходит дизайнер и говорит: «Всё пропало, ставь скругление 8 пикселей!» Вы терпеливо заходите в CSS-файл и в 30 местах меняете 7px на 8px.

Приходит дизайнер и говорит: «Миша, всё ерунда, давай по новой. Теперь 6 пикселей». Можно запустить в дизайнера стулом, а можно использовать препроцессор.

С препроцессором у вас 30 кнопок, в которых будет вот так:

border-radius: $defaultBorderRadius

А где-то в отдельном месте документа будет один раз написано:

$defaultBorderRadius: 7px;

И когда дизайнер придёт менять скругление на кнопках, вы измените его один раз, в одном месте, не нанося телесные повреждения дизайнеру.

Какие бывают препроцессоры CSS

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

Любопытно, что у Sass есть два синтаксиса:

• Sass — самый первый вариант, где не используются фигурные скобки, а всё сделано на отступах, как в Python.
• SCSS — в нём есть фигурные скобки, как в родном CSS, а ещё есть поддержка современных CSS-трюков, которые используются в разных браузерах. Этот формат появился после выхода LESS и стал ответом конкуренту.

LESS. В 2009 году другие программисты показали свою версию препроцессора, основанную на Sass. Они взяли за основу чистый CSS-синтаксис и добавили в него возможность использовать все расширения как в Sass. Технически это интереснее, чем простой Sass, но нельзя сказать, что это сильно круче, чем тот же SCSS.

Stylus и другие. Есть и другие препроцессоры — например, тот же Stylus. Принципиально он делает то же самое, но использует другой синтаксис, более лаконичный и простой.

Какой выбрать?

По сути все они делают одно и то же: упрощают работу с CSS-кодом, поэтому это вопрос вкуса и привычек. Если давать общие рекомендации, мы бы сделали так:

• Sass (SCSS) подойдёт тем, кто больше любит программирование, чем вёрстку.
• LESS понравится всем, кому приглянулся чистый CSS-синтаксис, но хочется сделать работу ещё проще.
• Stylus можно выбрать тем, кто ценит в коде лаконичность и минимализм.

Когда использовать препроцессоры

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

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

Переменные. Если вы используете один и тот же фирменный цвет для ссылок, рамок вокруг картинок, то можно задать этот цвет в одном месте, а потом обращаться к нему откуда угодно. Зададим переменными ширину и цвет элемента:

$width: 10px;
$headercolor:red;
#main h1 width: $width;
color:$headercolor;
>

Простая работа с вложенными структурами. Когда мы делали красивые ссылки, то у нас была вложенная структура для элемента а: подчёркивание при наведении, цвет после посещения ссылки, цвет до посещения и так далее. Вот как это можно организовать попроще:

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

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

@mixin good-text font: family: Arial;
size: 20px;
weight: bold;
>
>
.page-text @include good-text;
color: #000000;
>
.menu-text @include good-text;
color: #ff0000;
>
.tip-text @include good-text;
color: #ffffff;
background-color: #000000;
>

.page-text font-family: Arial;
font-size: 20px;
font-weight: bold;
color: #000000;
>
.menu-text font-family: Arial;
font-size: 20px;
font-weight: bold;
color: #ff0000;
>
.tip-text font-family: Arial;
font-size: 20px;
font-weight: bold;
color: #ffffff;
background-color: #000000;
>

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

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

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

Так как все CSS-препроцессоры делают примерно одно и то же, только немного разными способами, то сильные и слабые стороны у них будут одни и те же:

✅ Хорошо подходят для больших проектов.

✅ Сильно расширяют возможности обычного CSS.

✅ Упрощают работу с однотипным кодом.

✅ Проще вносить изменения и поддерживать код в актуальном состоянии.

✅ Сразу видна логическая структура CSS, легко разобраться в том, из чего состоит каждый элемент.

❌ Нет смысла использовать в маленьких проектах и простых страницах.

❌ На выходе препроцессора получается CSS-код, который сложно прочитать человеку.

❌ Нужно изучать что-то кроме самого CSS.

❌ У каждого препроцессора свой синтаксис, и не получится быстро перейти от одного к другому.

С чего начать

Sass → почитайте sass-scss.ru, там есть всё, что нужно знать для работы с этим препроцессором. Документация настолько подробная, что её можно освоить вообще без опыта работы с таким инструментом.

LESS → Путеводитель для новичков по CSS-препроцессору Less. Просто, доходчиво и с кучей примеров для каждой команды.

Stylus → если знаете английский, почитайте официальный сайт проекта. Если не знаете — почитайте краткое руководство по использованию и опыт разработчиков Яндекс.Почты.

Получите ИТ-профессию

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

CSS-препроцессоры в 2024. Большой обзор

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

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

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Препроцессор 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 .@

С помощью 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 миллионов скачиваний в неделю.

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-кода.

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