Дефицита в статьях, пропагандирующих использование препроцессоров и предоставляющих краткое руководство по ним, в последние годы нет, и многие моменты уже были достаточно хорошо расписаны. Так что давайте сфокусируемся на том, что часто упускают из виду, и посмотрим, что можно противопоставить решениям для терминала.
Вступление (опциональное)
Никакую статью о препроцессорах нельзя считать полноценной без общего обзора для тех, кто не знаком с самой концепцией. Если Вам покажется это все знакомым, то, не стесняясь, перемещайтесь к главе Реальная Польза.
Как было отмечено во вступлении, такие вещи, как 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 для контроля над препроцессингом? Вот несколько вариантов для начала:
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
Как сделать выбор
Сообщество вокруг каждого из препроцессоров относится к своему выбору довольно трепетно. Но, как ни крути, все они очень похожи. Чтобы выбрать тот самый препроцессор, который подойдет именно Вашему проекту, взгляните на статьи Криса Койера Sass vs. Less и Джонатана Крума Sass vs. LESS vs. Stylus: Preprocessor Shootout.
ссылка на оригинал статьи http://habrahabr.ru/post/159685/
Добавить комментарий