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

Было время, когда я понятия не имел, что такое CSS препроцессоры и что с ними делать. Я очень долгое время занимал нишу full-stack разработчика, при этом верстая на классическом CSS. Чуть позже я узнал об этих вещах от своего товарища - Андрея:

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

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

Пытаясь разобраться в теме, я нашел 3 проекта: LESS, SASS, Stylus. Немного рассмотрим их, для общего развития.

LESS

LESS написан на JavaScript, он дополняет обычный CSS динамическим функциями: переменными, примешиваниями (Mixins), операциями и функциями. Из всех приведенных здесь CSS-препроцессоров, LESS обладает наиболее полной и удобной документацией для разработчиков. Он является наиболее легким для осваивания, его синтаксис похож на чистый CSS, позволяет повторно использовать классы в качестве примешиваний в любом месте файла .css.

Бонусом к тому, чтобы использовать LESS можно сказать то, что Twitter Bootstrap активно используют динамические возможности LESS.

Например, класс

.list-reset {
  margin: 0;
  padding: 0;
  list-style: none;
}

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

.warning {
  .list-reset;
  color: red;
}

SASS

Написан на Ruby, он также расширяет СSS, добавляя вложенные правила, переменные, примешивания, функции и т.д. Некоторые фреймворки используют в своем пакете поддержку Sass.

Лучше всего Sass использовать совместно с фреймворком Compass, функции и аддоны которого построены на основе Sass, что позволяет разработчику легко работать с изображениями, писать чистый код, создавать респонсивные CSS системы, построенные на базе сетки Susy.

У Sass есть 2 синтаксиса: SCSS, который расшифровывается, как “Sassy CSS” и старый синтаксис с отступами, который и есть Sass. Я эту систему не использовал и не использую, но во многих компаниях она популярна. Примеров синтаксиса приводить не буду, если Вы захотите использовать этот CSS-препроцессор, то легко найдете примеры и инструкции по осваиванию данной технологии на соответствующих сайтах.

Stylus

Написан на JavaScript (node.js), он объединяет в себе возможности, предоставляемые Sass и LESS. Поддерживает синтаксис как обоих этих систем, так и обычный CSS. Stylus можно использовать вместе с Nib — библиотекой расширений похожей на Compass, что позволяет делать кроссбраузерные CSS примешивания (Mixins). Синтаксис очень минималистичный и гибкий, например:

h1
font 2em Helvetica, Arial, sans-serif

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