Препроцессоры 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 Препроцессоры и их Преимущества

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

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

Что такое CSS-препроцессор?

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

Все вышеперечисленные препроцессоры имеют практически идентичный функционал, есть только небольшие различия в синтаксисе. Теперь, вернемся же к вопросу, озвученному ранее: какие преимущества дают нам препроцессоры, для того чтобы сделать наш код более удобным, и поддерживаемым? Это, прежде всего, вложенность. Такая особенность дает нам возможность структурировать элементы, с легкостью найти родителя элемента, быстро писать псевдоклассы и псевдоэлементы и даже использовать БЭМ! К примеру:
.track
color: #fff
&__title
paddding: 10px
&:hover, &:focus
color: blue

Посмотрите на этот фрагмент кода, написанный на Sass. Всё это преобразуется в следующий CSS:

.track < color: #FFF;>
.track__title < padding: 10px;>
.track__title:hover, .track-title:focus

Лаконично, удобно, понятно, структура от родителя до потомка — здорово, не так ли? Вторым, и не менее важным, преимуществом, являются переменные. Принцип работы их предельно прост: имя переменной начинается с символа $ , а дальше само имя. Через двоеточие пишем значение — это может быть цвет в любом удобном виде, значения отступа, ширины, размера шрифта и так далее. В итоге мы получим примерно следующее:

$btn-color: blue;
$font-main-size: 16px;

А использование будет выглядеть следующим образом:

.block <
font-size: $font-main-size;
>

Только представьте себе, как это удобно. Если вам нужно поменять цвет кнопок по всему сайту, то это достаточно сделать только в одном месте! Что же, идем дальше. Третье, и самое большое, что может нам предложить CSS-препроцессоров — это использования миксинов. В привычном для нас понимании, миксины — это функции, которые можно использовать несколько раз, не повторяя одни и те же части кода (помним об одном из принципов программирования — DRY — Don’t repeat yourself). Признаться честно, я не так часто использую миксины, видимо не было такой острой необходимости, однако несколько примеров я всё же покажу. Одна из самых используемых мной функций имеет следующий вид:

@function em($pixels, $context: $browser-context) <
@if (unitless($pixels)) <
$pixels: $pixels * 1px;
>
@if (unitless($context)) <
$context: $context * 1px;
>
@return $pixels / $context * 1em;
>

А её применение имеет следующий вид:

Да, как вы поняли, это всего лишь преобразование размера шрифта из PX в Em (да здравствует те времена, когда для такой мелочи раньше пользовались специальным сервисами или считали сами на калькуляторе). Следующий пример также позволяет сэкономить много времени:

input, textarea <
@include input-placeholder <
color: $grey;
>
>

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

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

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

Оцените (158 оценки — 4.4 из 5)

Препроцессоры 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 принимает модули с зависимостями и генерирует статические ресурсы, представляющие эти модули. Для лучшей работы с препроцессорами есть специальные пакеты/модули.

Читать:

Как снять обшивку потолка audi a4 b6

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-препроцессоры

Если рассматривать препроцессоры вместе с 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 до упрощённого (отсутствуют : , ; , <> и некоторые скобки).