Цель: изучить препроцессоры

Задачи:

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

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

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

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

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

Некоторые понятия

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

Css препроцессоры

При помощи препроцессоров можно писать код, который нацелен на:

Синтаксический сахар

Перед тем, как перейти к дальнейшему рассмотрению CSS-препроцессоров, стоит обновить лексикон новым понятием — «синтаксический сахар».

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

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

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

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

И несколько незначительных:

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

Какой смысл использования препроцессоров?

Как уже было отмечено выше, основные плюсы — это читабельность кода, структурирование и повышение производительности.

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

CSS — это сложно

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

Доступная документация

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

Простота использования

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

Для более продвинутых пользователей есть специальные сборщики проектов.

Структура и логичность кода

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

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

Примеси

Модульность

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

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

Почему бы не подождать развития CSS?

Развитие CSS идёт очень маленькими и неуверенными шагами, так как W3C придерживается приоритета скорости срабатывания CSS (производительности). С одной стороны это правильно и очень важно, но с другой — это отсутствие удобства для разработчиков.

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

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

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

Less

Самый популярный на момент написания этого материала препроцессор. Основан в 2009 году Алексис Сельер (Alexis Sellier) и написан на JavaScript (изначально был написан на Ruby, но Алексис вовремя сделал правильный шаг). Имеет все базовые возможности препроцессоров и даже больше, но не имеет условных конструкций и циклов в привычном понимании. Основным плюсом является его простота, практически стандартный для CSS синтаксис и возможность расширения функционала за счёт системы плагинов.

Sass (SCSS)

Самый мощный из CSS-препроцессоров. Имеет довольно большое сообщество разработчиков. Основан в 2007 году как модуль для HAML и написан на Ruby (есть порт на C++). Имеет куда больший ассортимент возможностей в сравнении с Less. Возможности самого препроцессора расширяются за счёт многофункциональной библиотеки Compass, которая позволяет выйти за рамки CSS и работать, например, со спрайтами в автоматическом режиме.

Имеет два синтаксиса:

Разница между Less и SASS

SASS

Препроцессор Sass начал свой путь в 2007 году как часть HTML-шаблонизатора Haml для Ruby on Rails. Вдохнув в CSS-разметку новую жизнь, он быстро завоевал симпатии рубистов, несмотря на отсутствие каких-либо средств отладки и необходимость привыкать к нестандартному «своему» синтаксису. В ранних версиях создатели Sass Хэмптон Кэтлин и Натан Вайценбаум вместе с примкнувшим к ним впоследствии Крисом Эпштейном заложили в него многое из того джентльменского набора, что сегодня в том или ином виде сопровождает все CSS-препроцессоры: переменные, вычисления, вложенные селекторы и миксины (в ранних версиях, правда, статические, и не позволяющие подстановку аргументов). По мере взросления функциональность Sass существенно расширялась и дополнялась.

Переменные

То, чего сильно не хватало оригинальному CSS, — переменные в Sass.

$red: #FF4848
$narrow: 45px
$article_text: 1.5em, Helvetica, Arial, sans-serif

$red: #FF5050
h1
  color: $red
p
  color: darken($red, 10%)

CSS
h1 {
  color: #ff5050;
}
p {
  color: #ff1d1d;
}

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

Вложенность

div.toplevel{
    // Какие-то свойства родителя
}
div.toplevel p {
    // Свойства вложенного элемента
}
div.toplevel p ul {
    // Свойства самого глубоко вложенного элемента
}

div.toplevel
  // Какие-то свойства родителя
  p
    // Свойства вложенного элемента
    ul
      // Свойства самого глубоко вложенного элемента

Импорт

Еще одним долгожданным нововведением в Sass стал импорт файлов. Организован импорт очень просто:

// Подключаем _buttons.sass
@import 'buttons'

Less

В 2009 году Алексис Селье представляет миру новый инструмент для более гибкой работы со стилями под названием Less. Первая реализация была разработана Алексисом на Ruby, и это означало, что у Sass появился конкурент.

В это время Node.js начал набирать обороты. Алексис, чувствуя тенденцию, решает переписать Less на JavaScript.

Миксины

LESS
.b-pretty-text (color, family, size) {
  color: @color;
  font-family: “family”;
  font-size: size;
}
.b-pretty-text-1 {
  .b-pretty-text(‘red’, ‘Comic Sans’, ‘27px’)
}

CSS
.b-pretty-text-1 {
  color: #ff0000;
  font-family: "Comic Sans";
  font-size: 27px;
}

Расширение

LESS
.b-message {
  color: black;
  background-color: green;
  background-image: url(‘/i/foo.png’);
  background-repeat: no-repeat;
}
.b-message-error {
  &:extend(.b-message);
  color: white;
  background-color: green;
}

CSS
.b-message,
.b-message-error {
    color: black;
    background-color: green;
    background-image: url(‘/i/foo.png’);
    background-repeat: no-repeat;
}
.b-message-error {
    color: white;
    background-color: green;
}

Гуарды (guards)

LESS
.b-message {
  color: black;
  background-color: green;
  background-image: url(‘/i/foo.png’);
  background-repeat: no-repeat;
}
.b-message-error {
  &:extend(.b-message);
  color: white;
  background-color: green;
}

CSS
.b-message,
.b-message-error {
    color: black;
    background-color: green;
    background-image: url(‘/i/foo.png’);
    background-repeat: no-repeat;
}
.b-message-error {
    color: white;
    background-color: green;
}

Мердж

LESS
.b-chameleon (@val) when (lightness(@val) >= 50%) {
  background-color: black;
}
.b-chameleon (@val) when (lightness(@val) < 50%) {
  background-color: white;
}
.b-chameleon (@val) {
  color: @val;
}
.b-foo { .b-chameleon(#ddd) }
.b-bar { .b-chameleon(#555) }

CSS
.b-foo {
  background-color: black;
  color: #dddddd;
}
.b-bar {
  background-color: white;
  color: #555555;
}

Контрольные вопросы

1. Что такое препроцессор?
2. Зачем нужны препроцессоры?
3. Для чего нужны CSS препроцессоры?
4. Что такое синтаксический сахар?
5. Зачем нужны примеси?
6. Что такое модульность?
7. Для чего используются переменные?
8. Для чего используется импорт?
9. Что такое миксины?
10. Для чего нужны гуарды?
11. Что позволяет повторно использовать код?
12. В чем отличия синтаксисов SASS/SCSS?
13. Чем являются переменные в SASS?
14. С использованием какой технологии создан Less?
15. Что делает расширение?