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-документ на основе более простого кода.
Представьте, что у вас в проекте 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 → если знаете английский, почитайте официальный сайт проекта. Если не знаете — почитайте краткое руководство по использованию и опыт разработчиков Яндекс.Почты.
Получите ИТ-профессию
В «Яндекс Практикуме» можно стать разработчиком, тестировщиком, аналитиком и менеджером цифровых продуктов. Первая часть обучения всегда бесплатная, чтобы попробовать и найти то, что вам по душе. Дальше — программы трудоустройства.
Преимущества использования препроцессора (Sass) при написании CSS
В сети ведётся много споров о том, стоит ли использовать CSS-препроцессор в разработке. По моему личному мнению, препроцессор излишен для маленьких веб-проектов и приложений.
Тем не менее, по мере разрастания проекта поддержка и читаемость CSS становится всё труднее. Разработчики тратят больше времени при работе с тысячами строк CSS-правил, из-за чего повышается стоимость проекта. Поскольку проект становится больше, CSS вызывает некоторые проблемы, такие как:
- Большие усилия для внесения небольших изменений
- Трудности при структурировании кода
- Избыточность кода
- Бесконечные строки CSS-классов и правил
Препроцессор помогает нам справиться с этими проблемами. Он имеет некоторые преимущества перед обычным CSS. Прежде чем мы погрузимся глубже в тему, для начала стоит выяснить, что же такое CSS-препроцессор…
Что такое CSS-препроцессор?
Это программа/инструмент, имеющая свой собственный синтаксис, который затем компилируется в стандартный CSS-код.
Препроцессор имеет свой собственный синтаксис, чтобы разработчики могли писать более простой и чистый CSS-код. Так как браузеры не понимают такой синтаксис, он преобразовывается, и на выходе получается привычный CSS в отдельном файле.
Существуют различные препроцессоры, такие как Sass, Less и Stylus. В этой статье я расскажу о некоторых преимуществах Sass.
Что такое Sass?
Sass является одним из наиболее широко используемых CSS-препроцессоров. Он имеет различные функции, помогающие разработчикам писать CSS-код лучше и чище. За более подробной информацией вы можете обратиться к официальному сайту Sass и GitHub-репозиторию.
FAQ: Sass или SCSS
Это часто задаваемый вопрос. На самом деле, они оба являются Sass-препроцессором, просто имеют разный синтаксис. Проще говоря, SCSS — это новый синтаксис Sass 3 версии.
Пример синтаксиса Sass:
$color: gray=my-font( $color )
font-family: Arial, Helvetica, sans-serif
font-size: 16px
color: $colorbody
background: $color
margin: 0
+my-font(white)
Пример синтаксиса SCSS:
$color: gray;@mixin my-font($color) font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: $color;
>body background: $color;
margin: 0;
@include my-font(white);
>
Как мы можем видеть, SCSS (Sassy CSS) имеет CSS-подобный синтаксис, который намного легче читается. Он является расширением CSS, в то время как синтаксис Sass имеет более существенные отличия. Они также имеют разное расширение файла: .sass и .scss .
Подробнее об этом можно прочитать здесь. А теперь давайте перейдем к особенностям Sass.
Особенность #1: Переменные
В одном проекте разные CSS-классы могут содержать одинаковое правило или группу правил. Например, на странице у нас есть 20 блоков с разным цветом фона:
.box-1 width: 100px;
height: 100px;
background: red;
>.box-2 width: 100px;
height: 100px;
background: yellow;
>. .box-20 width: 100px;
height: 100px;
background: blue;
>
Позже наш клиент передумал и захотел блоки большего размера. Поэтому мне нужно поменять значения свойств width and height один за другим для каждого класса. А классов может быть и 50. В реальном программировании это может занять много времени. Как я уже упоминал выше, это пример больших усилий для небольших изменений.
Как можно сделать это более эффективно?
Sass предоставляет решение в виде переменных. Как и в других языках программирования, мы можем использовать переменные для хранения значений и использовать их повторно.
$variable-name: value;
Возвращаясь к примеру выше, можно задать переменные для свойств width и height :
$box-width: 100px;
$box-height: 100px;
Если в дальнейшем нужно будет внести изменения, мы должны будем поменять значения всего лишь один раз:
$box-width: 200px; // changed from 100px to 200px
$box-height: 200px; // that's all!.box-1 width: $box-width; // using variables now instead of pixels
height: $box-height;
background: red;
>.box-2 width: $box-width;
height: $box-height;
background: yellow;
>. .box-20 width: $box-width;
height: $box-height;
background: blue;
>
CSS теперь также поддерживает переменные, но они не работают в IE и старых версиях других браузеров:
Особенность #2: Вложенность
Стандартный CSS не поддерживает вложенность. Мы не можем написать класс внутри другого класса. С ростом проекта это приводит к проблемам с читаемостью. Структура также выглядит не очень хорошо.
Например, создадим ниже в HTML навигационное меню с гиперссылками:
HTML поддерживает вложенный код. Но CSS без вложенности будет выглядеть так:
Нам приходится добавлять класс nav для каждого тега, даже для псевдокласса hover, потому что nav является родительским тегом для всех элементов. Однако, Sass поддерживает вложенность:
Используя Sass, мы можем писать более структурированный код, как в HTML. Больше не нужно добавлять nav для каждого класса, что также предотвращает избыточность кода.
Важно: не рекомендуется допускать более 3 уровней вложенности.
Особенность #3: Mixins (миксины)
Выше мы узнали, как применять переменные для CSS-правил. Но что, если нам нужно использовать несколько правил вместе? Для этих целей у Sass есть миксины.
Что такое миксин?
Миксины (также иногда называемые примесями) являются функциями Sass, которые группируют CSS-правила. Мы можем использовать их в качестве переменных.
Миксин создается с помощью команды @ mixin и названия миксина:
@mixin my-font font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: italic;
>
Также можно создать миксин в виде функции и добавлять к ней параметры:
$font-color: red;@mixin my-font($font-color) font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: italic;
color: $font-color;
>
После создания миксина мы можем воспользоваться им в любом классе при помощи команды @ include. Таким образом, мы можем подключить миксин my-font вместо того, чтобы каждый раз писать 4 строки правил для шрифта. Такой подход упрощает код.
p <
@include my-font;
>
Использование миксинов — это хороший способ предотвратить избыточность кода.
Особенность #4: Импорт
Наконец, мы можем разбить наши огромные CSS-файлы на более мелкие с помощью Sass-функции импорта. Гораздо проще читать и поддерживать маленькие файлы, а не один большой файл с бесконечными строками.
Вообще, CSS сейчас тоже имеет функцию импорта. Но там это работает по-другому. Чтобы импортировать файл, CSS каждый раз посылает HTTP-запрос к серверу. Sass делает это без HTTP-запросов, а значит процесс происходит быстрее.
Всё, что требуется сделать — это импортировать один Sass-файл в другой, используя команду @ import:
// Your main Sass file@import 'file';
@import 'anotherFile';.class // Your code
>
При указании пути к файлу не нужно добавлять расширение .scss, Sass найдет его и без этого.
Таким образом, в статье были представлены некоторые важные особенности Sass, которые помогут писать более эффективный CSS-код. Чтобы разобраться в этом получше, вы можете установить Sass в вашу систему. Или же можно сразу начать практиковаться на codepen.io.
CSS-препроцессоры
Если рассматривать препроцессоры вместе с CSS, то получается картина более понятная, нежели чем рассматривать понятие препроцессора отдельно.
Определение
CSS препроцессор (от англ. CSS preprocessor) — это надстройка над CSS, которая добавляет ранее недоступные возможности для CSS, с помощью новых синтаксических конструкций.
Основная задача препроцессора — это предоставление удобных синтаксических конструкций для разработчика, чтобы упростить, и тем самым, ускорить разработку и поддержу стилей в проектах.
CSS препроцессоры преобразуют код, написанный с использованием препроцессорного языка, в чистый и валидный CSS-код.
При помощи препроцессоров вы можете писать код, который нацелен на:
- Читабельность для человека
- Структурированность и логичность
- Производительность
И это лишь малая часть того, что может дать вам препроцессор. Но не стоит забегать вперёд.
Синтаксический сахар
Перед тем, как перейти к дальнейшему рассмотрению CSS-препроцессоров, давайте обновим наш лексикон новым понятием — «синтаксический сахар».
Синтаксический сахар (от англ. syntactic sugar) — это дополнения синтаксиса языка программирования, которые не вносят каких-то существенных изменений или новых возможностей, но делают этот язык более читабельным для человека.
Синтаксический сахар вводит в язык альтернативные варианты записи заложенных в этот язык конструкций. Под альтернативными вариантами записи стоит понимать более короткие или удобные конструкции для человека, которые в конечном итоге будут преобразовываться препроцессором в исходный язык, без синтаксического сахара.
Если попытаться применить это понятие к CSS-препроцессорам, то оно, в общем случае, полностью описывает их суть. Ещё раз напомню, что основной задачей препроцессоров является упрощение и ускорение разработки, а как это ещё можно сделать, если не ввести альтернативные варианты записи?
Какие бывают CSS-препроцессоры?
Пора перейти к более конкретным примерам, а именно к самим CSS-препроцессорам. На момент написания книги можно выделить три популярных препроцессора:
И несколько незначительных для нас игроков:
- Closure Stylesheets
- CSS Crush
О первой тройке мы поговорим отдельно немногим ниже, а вот о двух последних разговора вообще не будет, в виду их непопулярности. При желании, описания этих препроцессоров с лёгкостью можно найти в поисковике.
Какой смысл использования препроцессоров?
Как я уже отметил выше, основные плюсы — это читабельность кода, структурирование и повышение производительности.
Существуют также и другие причины того, чтобы начать использовать препроцессор уже сегодня. Я хочу заострить на этом внимание, так как разработчики раньше, да многие и сейчас, отнекиваются от использования препроцессоров, находя их сложными, непонятными и ненужными.
CSS — это сложно
Стандартный CSS — это сложно. Синтаксис без использования вложенности, которую предлагают CSS-препроцессоры, просто напросто сложен для зрительного восприятия. Кроме того, нужно помнить имя родителя при вложенности. Отсутствие нормальных переменных и «функций» делает CSS-код грязным и узконаправленным.
Доступная документация
Прошли те времена, когда документация от препроцессоров была доступна только людям «в теме». Сейчас любой желающий может в кратчайшие сроки освоить любой из препроцессоров, причём с минимальными затратами сил.
Простота использования
Использовать препроцессоры стало проще, чем раньше, причём намного проще. Для этого нужно лишь установить программу, которая будет следить за файлами, предназначенными для препроцессора, и при их изменении будет компилировать содержимое этих файлов в чистый CSS-код.
Для более продвинутых пользователей есть специальные сборщики проектов. Не думайте, что если вы используете программу для препроцессоров, а не сборщик проектов, то вы недостаточно круты. На самом деле, такие сборщики предлагают полный контроль и расширенные настройки, а не делают из вас джедая.
Структура и логичность кода
Самым популярным предлагаемым функционалом любого CSS-препроцессора является возможность вкладывать селекторы друг в друга. Я не буду сейчас приводить пример, так как о возможностях Less, включая вложенность, будет написана соответствующая часть книги. На этом этапе вам стоит знать лишь то, что при использовании препроцессоров, можно вкладывать один селектор в другой, а другой в третий, получая что-то, похожее на оглавление книги:
1. Родительский селектор 1.1. Вложенный селектор 1.2. Вложенный селектор 1.2.1. Вложенный селектор 1.3. Вложенный селектор Конечно, в реальной жизни селекторы не могут начинаться с цифр, однако, для проведения параллели между вложенностью и оглавлением, думаю такое упущение здесь уместно.
Примеси
Если говорить совсем кратко, то, используя примеси (от англ. Mixins), можно сделать код переиспользуемым. Это помогает избежать вспомогательных классов в разметке или дублирования свойств от селектора к селектору.
Модульность
Еще одним бонусом, который прямо сейчас уговорил бы меня начать пользоваться CSS-препроцессором, будет возможность вкладывать файлы в файлы, то есть проще говоря, производить конкатенацию файлов в заданной последовательности. Да, это можно организовать и на чистом CSS, но вкупе с другими возможностями получается очень мощный инструмент.
При этом мы получаем возможность делиться модулями (библиотеками примесей), которые создали для своих нужд и посчитали полезными для других людей. Получается, что любой разработчик может загрузить вашу библиотеку и использовать её в своих целях, вызывая по мере необходимости написанные вами примеси.
Почему бы не подождать развития CSS?
Развитие CSS идёт очень маленькими и неуверенными шагами, так как W3C придерживается приоритета скорости срабатывания CSS (производительности). С одной стороны это правильно и очень важно, но с другой — это отсутствие удобства для разработчиков.
В пример поставлю одну из спецификаций CSS4, которую ввели под давлением разработчиков — селектор по родителю. Столь долгий путь от идеи до принятия решения был из-за того, что W3C считало такой селектор медленным и дальнейшее его использование на сайтах привело бы к диким тормозам. Конечно же, речь идёт о повсеместном применении этого селектора, а не о единичных случаях.
Так что не стоит ждать в ближайшее время революций и изменений, способных затмить функционал и возможности CSS-препроцессоров.
Разновидности препроцессоров
Разумеется, как и в любой другой области, всегда есть конкуренция, и на рынке препроцессоров сейчас три главных, враждующих между собой лагеря:
Враждующими я их называю, потому что каждый приверженец одного из препроцессоров считает своим долгом поливать нечистотами представителей других, скажем так, конфессий. Такая неприязнь особенно часто проявляется у любителей препроцессора Sass, который считается старейшим и мощнейшим из всех трёх препроцессоров.
Для полной картины, я хочу привести краткую справку по каждому препроцессору:
Less
Собственно, герой этой книги. Самый популярный на момент написания книги препроцессор. Основан в 2009 году Алексис Сельер (Alexis Sellier) и написан на JavaScript (изначально был написан на Ruby, но Алексис вовремя сделал правильный шаг). Имеет все базовые возможности препроцессоров и даже больше, но не имеет условных конструкций и циклов в привычном для нас понимании. Основным плюсом является его простота, практически стандартный для CSS синтаксис и возможность расширения функционала за счёт системы плагинов.
Sass (SCSS)
Самый мощный из CSS-препроцессоров. Имеет довольно большое сообщество разработчиков. Основан в 2007 году как модуль для HAML и написан на Ruby (есть порт на C++). Имеет куда больший ассортимент возможностей в сравнении с Less. Возможности самого препроцессора расширяются за счёт многофункциональной библиотеки Compass, которая позволяет выйти за рамки CSS и работать, например, со спрайтами в автоматическом режиме.
Имеет два синтаксиса:
- Sass (Syntactically Awesome Style Sheets) — упрощённый синтаксис CSS, который основан на идентации. Считается устаревшим.
- SCSS (Sassy CSS) — основан на стандартном для CSS синтаксисе.
Stylus
Самый молодой, но в тоже время самый перспективный CSS-препроцессор. Основан в 2010 году небезызвестной в наших кругах личностью TJ Holowaychuk. Говорят, это самый удобный и расширяемый препроцессор, а ещё он гибче Sass. Написан на JavaScript. Поддерживает уйму вариантов синтаксиса от подобного CSS до упрощённого (отсутствуют : , ; , <> и некоторые скобки).