Препроцессоры CSS: Взвешенный выбор

в 15:42, , рубрики: css, less, preprocessing, sass, stylus, веб-дизайн, Веб-разработка, верстка, препроцессоры

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

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

Препроцессоры CSS: Взвешенный выбор

Вступление (опциональное)

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

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

Используя любой из перечисленных препроцессоров, Вы сможете извлечь следующую выгоду:

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

Расширенная функциональность: Эти языки, в той или иной степени, предлагают дополнительные возможности для формирования наших стилей; под этим подразумеваются миксины (куски многократно используемого кода, которые могут принимать опциональные аргументы), расширения (наследование классов) и поддержка переменных.

Адд-оны: для расширения стандартного арсенала, очень широко применяются различные адд-оны. У Sass есть Compass, у Stylus есть Nib, и, хотя это и из другой оперы, не нуждающийся в представлении Bootstrap построен с помощью LESS.

Реальная польза

На деле, основная польза препроцессоров кроется в меньшей затрате усилий — не физических (реже нажимать на клавиши), а умственных. Препроцессоры дают Вам эффективную возможность снять часть утомительных нагрузок на ум и поменьше переключаться между различными приложениями, что характерно при фронтенд разработке. У Вас есть часто используемое значение цвета? Сохраните его в переменную, вместо того, чтобы охотиться за ним по проекту или хранить его у себя в памяти. Нужно предсказуемо и просто поменять цвет? В SASS есть набор операций над цветом, которые занимаются исключительно тем, что отменяют необходимость тянуться за ближайшим колор-пикером.

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

Основная идея в том, что: эти языки позволяют Вам сосредоточиться на решении задач, вместо отвлечения на инструменты и переключения контекста.

Безболезненная компиляция

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

Прямо в браузере

Не совсем уверены? Посмотрите на эти браузерные реализации препроцессоров:

CodePen — Sass + LESS
jsFiddle — Sass
Try Stylus! — Stylus

Препроцессоры CSS: Взвешенный выбор

Приложения

Вы уже в деле, но ищете подходящий GUI для контроля над препроцессингом? Вот несколько вариантов для начала:

Codekit$25, Mac — Sass/LESS/Stylus
Fire.app$14, Mac/Win/Linux — Sass
LiveReload$10, Mac + Win (alpha) — Sass/LESS/Stylus
Compass.app$10, Mac/Win/Linux — Sass

Препроцессоры CSS: Взвешенный выбор

Как сделать выбор

Сообщество вокруг каждого из препроцессоров относится к своему выбору довольно трепетно. Но, как ни крути, все они очень похожи. Чтобы выбрать тот самый препроцессор, который подойдет именно Вашему проекту, взгляните на статьи Криса Койера Sass vs. Less и Джонатана Крума Sass vs. LESS vs. Stylus: Preprocessor Shootout.

Автор: shebanoff

Источник

Поделиться

* - обязательные к заполнению поля