CSS — умышленно простой язык. С распространением сложных веб-приложений, появлением должности фронтенд разработчика, и растущим количеством новомодных требований, эта простота быстро испаряется. Для непосвященных, CSS препроцессоры (в частности Sass, LESS, и Stylus) расширяют Ваши возможности при написании стилей с помощью такой дополнительной функциональности как переменные, вложенность и миксины — что дает гораздо больше контроля над большим количеством стилей.
Дефицита в статьях, пропагандирующих использование препроцессоров и предоставляющих краткое руководство по ним, в последние годы нет, и многие моменты уже были достаточно хорошо расписаны. Так что давайте сфокусируемся на том, что часто упускают из виду, и посмотрим, что можно противопоставить решениям для терминала.
Вступление (опциональное)
Никакую статью о препроцессорах нельзя считать полноценной без общего обзора для тех, кто не знаком с самой концепцией. Если Вам покажется это все знакомым, то, не стесняясь, перемещайтесь к главе Реальная Польза.
Как было отмечено во вступлении, такие вещи, как Sass, LESS и Stylus предоставляют нам дополнительную функциональность поверх CSS, но файлы, написанные на этих языках, должны быть скомпилированы в CSS до того, как браузер попытается разобрать в них что-нибудь. В общем случае, процесс компиляции автоматизирован таким образом, чтобы свести на нет какое-либо влияние на рабочий процесс.
Используя любой из перечисленных препроцессоров, Вы сможете извлечь следующую выгоду:
Выразительность: Каждый из препроцессоров содержит набор экономящих время соглашений, суть которых кроется в опциональности, либо отказе от разнообразных правил пунктуации. В зависимости от Ваших предпочтений, стили можно освободить от скобок, точек запятых, и/или обычных запятых. Плюс к этому, все они поддерживают вложенность селекторов.
Расширенная функциональность: Эти языки, в той или иной степени, предлагают дополнительные возможности для формирования наших стилей; под этим подразумеваются миксины (куски многократно используемого кода, которые могут принимать опциональные аргументы), расширения (наследование классов) и поддержка переменных.
Адд-оны: для расширения стандартного арсенала, очень широко применяются различные адд-оны. У Sass есть Compass, у Stylus есть Nib, и, хотя это и из другой оперы, не нуждающийся в представлении Bootstrap построен с помощью LESS.
Реальная польза
На деле, основная польза препроцессоров кроется в меньшей затрате усилий — не физических (реже нажимать на клавиши), а умственных. Препроцессоры дают Вам эффективную возможность снять часть утомительных нагрузок на ум и поменьше переключаться между различными приложениями, что характерно при фронтенд разработке. У Вас есть часто используемое значение цвета? Сохраните его в переменную, вместо того, чтобы охотиться за ним по проекту или хранить его у себя в памяти. Нужно предсказуемо и просто поменять цвет? В SASS есть набор операций над цветом, которые занимаются исключительно тем, что отменяют необходимость тянуться за ближайшим колор-пикером.
Внедряя препроцессор, у Вас появляется возможность сконцентрироваться непосредственно на написании стилей. Арифметика отзывчивого дизайна работает прямо внутри файла со стилями, без переключения к калькулятору. Compass может позаботиться о спрайтах за Вас. Разделение стилей на модульные файлы, и их последующее совмещение без удара по производительности, проходит бесшовно.
Основная идея в том, что: эти языки позволяют Вам сосредоточиться на решении задач, вместо отвлечения на инструменты и переключения контекста.
Безболезненная компиляция
Основным барьером к началу использования CSS препроцессоров обычно является не непонимание того, добро это или зло — людей пугает предложение установить пакет с помощью командной строки или перспектива настройки watch expressions. К счастью, все эти проблемы можно обойти, если вдруг терминал не является Вашим коньком.
Прямо в браузере
Не совсем уверены? Посмотрите на эти браузерные реализации препроцессоров:
CodePen — Sass + LESS
jsFiddle — Sass
Try Stylus! — Stylus
Приложения
Вы уже в деле, но ищете подходящий GUI для контроля над препроцессингом? Вот несколько вариантов для начала:
