Выбор препроцессора CSS. Препроцессоры CSS – незаменимый инструмент современного веб-разработчика Как появились препроцессоры CSS

Статья на NetTuts+, написанная Johnathan Croom в 2012 году.

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

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

Введение

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

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

Синтаксис

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

Sass & LESS

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

Вид обычного файла в синтаксисе Sass или LESS представлен ниже:

Хорошо видно, что это обычный синтаксис CSS, который прекрасно конвертируется в Sass (SCSS) или LESS.

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

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

Синтаксис Sass (старая версия ) выглядит следующим образом:

Stylus

Для своих файлов этот препроцессор использует расширение

Примеры синтаксиса Stylus:

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

Переменные

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

Sass

В препроцессоре Sass переменная объявляется с помощью символа

LESS

Переменные в LESS точно такие же, как и в Sass, за исключением того, что перед именем переменной ставится символ

Stylus

Переменные в Stylus не нуждаются ни в каком знаке для своего объявления, но, тем не менее, могут использовать символ

Другими словами, не выполняется такая операция:

Скомпилированный CSS

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

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

Ниже представлен CSS-код после выполнения компиляции:

Вложенность (nesting)

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

Например, так:

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

Sass, LESS & Stylus

Все три препроцессора имеют абсолютно одинаковый синтаксис для вложенных селекторов:

Скомпилированный CSS

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

Подмешивания (mixins)

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

Прим. переводчика: в приведенных ниже примерах стоит обратить внимание на разницу в синтаксисе объявления и вызова миксина внутри CSS-селектора для всех трех препроцессоров.

Sass

LESS

Style

Скомпилированный CSS

Результатом компиляции из всех трех препроцессоров будет одинаковый CSS-код:

Наследование (inheritance)

При написании CSS стилей “классическим” способом, для того чтобы применить одни и те же свойства к нескольким элементам в HTML-документе, нам следовало бы создать такой код:

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

В противоположность этому применяются наследование. Наследование - это возможность для одних CSS-селекторов наследовать свойства у другого селектора.

Прим. переводчика: обратите внимание на одинаковый синтаксис подключения (объявления) наследования внутри CSS-селектора с помощью директивы

1

@extend

.

Sass & Stylus

Скомпилированный CSS

LESS

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

Импорт стилей выполняется для каждого селектора. Обратной стороной такого подхода является постоянное повторение строк со свойствами в компилированном CSS-стиле.

Вот как может выглядеть LESS-код с наследованием:

Скомпилированный CSS

Как хорошо видно из кода, стили класса

Импортирование

В CSS-сообществе к импортированию стилей с помощью директивы

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

Прим. переводчика: другими словами, в препроцессорах импортирование необходимо для компиляции одного файла из нескольких. В стандартном CSS импортирование приводит к подстановке одного кода внутрь другого.

Обратите внимание, что при компилировании файла со стандартным подключением с помощью директивы

Скомпилированный CSS

Функции работы с цветом

“Цветовые” функции созданы для трансформации цвета при компиляции. Такие функции чрезвычайно полезны при создании градиентов, затемнения цвета при

Sass

Представленный выше код является всего лишь кратким списком функций работы с цветом в Sass. Полный список всех доступных функций расположен по адресу Sass Documentation .

“Цветовые” функции могут использоваться везде, где требуется работа с цветов в коде. Простой пример - объявлена переменная с цветом, к которой дальше в коде применяется функция затемнения цвета

LESS

Список функций препроцессора LESS находится на официальном сайте проекта LESS Documentation .

Ниже показан пример того, как можно применять “цветовые” функции в LESS:

Stylus

Полный список всех функций работы с цветом препроцессора Stylus представлен на сайте проекта Stylus Documentation .

И пример использования “цветовой” функции в Stylus:

Арифметические операции

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

Прим. переводчика: стоит упомянуть о функции из CSS3 по имени

1

calc()

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

Sass, LESS & Stylus

Практические примеры

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

Браузерные префиксы

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

Например, создадим для всех трех препроцессоров миксин скругления углов блока:

Sass

LESS

Stylus

Скомпилированный CSS

Трехмерный текст

Создание эффекта трехмерности для текста с помощью CSS-свойства

Используя миксины и функции для работы с цветом, мы можем создать объемный текст и изменять его цвет на лету:

Sass

LESS

Stylus

В примере для Stylus я выбрал вариант написания свойства

Скомпилированный CSS

Колонки

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

Sass

LESS

Stylus

Скомпилированный CSS

Некоторые уловки препроцессоров

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

Сообщение об ошибках

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

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

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

CSS препроцессор (CSS preprocessor) – это надстройка над CSS, которая предоставляет новые функции и возможности для CSS, с помощью добавленных синтаксических конструкций.

Цель препроцессоров : предоставление удобных синтаксических конструкций для веб-разработчика, чтобы упростить и ускорить разработку и поддержку стилей в проектах.

CSS препроцессоры делают код, написанный с использованием препроцессорного языка,чистым и валидным.

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

Среди наиболее популярных препроцессоров выделяют Less, Sass (Scss), Stylus . Также более менее заметными инструментами в данной области являются Closure Stylesheets, CSS Crush, они менее популярны на данный момент, но все таки ими пользуются некоторые разработчики. Попробуем разобраться в возможностях и особенностях Less, Sass (Scss), Stylus.

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

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

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

Less – наиболее популярный и часто используемый препроцессор. Разработан на основе JavaScript, включает базовые возможности препроцессоров, но не предоставляет условных конструкций и циклов в привычном для нас понимании. Благодаря своей простоте и лаконичности имеется стандартный для CSS синтаксис и возможность расширения функционала за счёт функционирования плагинов.

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

Другой мощный и популярный препроцессор – Sass . Вокруг данного инструмента образовалось огромное сообщество разработчиков. Он основан в 2007 году как модуль для HAML и написан на Ruby (предоставляет порт на C++). Имеет широкий ассортимент функций, если сравнивать с Less. Препроцессор расширяет свою функциональность за счёт библиотеки Compass, которая дает возможность выйти за рамки CSS и работать более масштабно. Предоставляет два вида синтаксиса: Sass (Syntactically Awesome Style Sheets) более простой синтаксис CSS, в основе которого идентация. Его считают более устаревшей версией. Scss (Sassy CSS) в основе которого стандартный для CSS синтаксис.

– довольно молодой, но уже перспективный CSS-препроцессор. Разработан еще в 2010 году. Многие считают его удобным и расширяемым препроцессор, и более гибким чем Sass. Разработан на JavaScript. Есть поддержка многих вариантов синтаксиса от подобного CSS до более простого и легкого.

Полезные инструменты для разработчика:

• CodeKit : делает компиляцию Sass, LESS и Stylus файлов, а затем автоматически перегружает ваш веб-браузер, после обновления файлов. В том числе оптимизирует изображения проекта для того, чтобы повысить производительность системы. Технология платна, но есть и триальная версия для работы.
• LiveReload : делает проверку изменений в файлах, потом обрабатывает их и автоматически перезагружает веб-браузер. Версия работает для Mac и Windows.
• Scout : Работает с Sass и Compass в среде Ruby. Работает для Mac и Windows.
• SimpLESS : обычный и простой LESS CSS компилятор для Mac и Windows.

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

2545 раз(а) 1 Сегодня просмотрено раз(а)

Появились вопросы?

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

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

Что такое CSS-препроцессор?

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

• Stylus

Все вышеперечисленные препроцессоры имеют практически идентичный функционал, есть только небольшие различия в синтаксисе. Теперь, вернемся же к вопросу, озвученному ранее: какие преимущества дают нам препроцессоры, для того чтобы сделать наш код более удобным, и поддерживаемым? Это, прежде всего, вложенность. Такая особенность дает нам возможность структурировать элементы, с легкостью найти родителя элемента, быстро писать псевдоклассы и псевдоэлементы и даже использовать БЭМ! К примеру:
.track
color: #fff
&__title
paddding: 10px
&:hover, &:focus
color: blue

Посмотрите на этот фрагмент кода, написанный на Sass. Всё это преобразуется в следующий CSS:

Track { color: #FFF;}
.track__title { padding: 10px;}
.track__title:hover, .track-title:focus { color: blue}

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

$btn-color: blue;
$font-main-size: 16px;

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

Block {
font-size: $font-main-size;
}

Только представьте себе, как это удобно. Если вам нужно поменять цвет кнопок по всему сайту, то это достаточно сделать только в одном месте! Что же, идем дальше. Третье, и самое большое, что может нам предложить CSS-препроцессоров - это использования миксинов. В привычном для нас понимании, миксины - это функции, которые можно использовать несколько раз, не повторяя одни и те же части кода (помним об одном из принципов программирования - DRY - Don’t repeat yourself). Признаться честно, я не так часто использую миксины, видимо не было такой острой необходимости, однако несколько примеров я всё же покажу. Одна из самых используемых мной функций имеет следующий вид:

@function em($pixels, $context: $browser-context) {
@if (unitless($pixels)) {
$pixels: $pixels * 1px;
}
@if (unitless($context)) {
$context: $context * 1px;
}
@return $pixels / $context * 1em;
}

А её применение имеет следующий вид:

body {
font-size: em(14px);
}

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

@mixin input-placeholder {
&.placeholder { @content; }
&:-moz-placeholder { @content; }
&::-moz-placeholder { @content; }
&:-ms-input-placeholder { @content; }
&::-webkit-input-placeholder { @content; }
}

Его использования:

input, textarea {
@include input-placeholder {
color: $grey;
}
}

Можно привести ещё множество примеров, однако, стоит начать использовать миксины самому, чтобы понять, насколько это полезный инструмент. Пожалуй, осталось ещё одна причина, которая заставит вас полюбить CSS-препроцессоры, и её имя - модульность. На дворе 2018 год, и модульность у нас повсюду - начиная от HTML-шаблонизаторов и заканчивая различными css фреймворками и сборщиками проектов.

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

Как появились препроцессоры CSS

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

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

В 1994 году норвежский ученый Хокон Ли разработал таблицу стилей, которая могла использоваться для оформления внешнего вида страницы отдельно от HTML-документа. Идея приглянулась представителям консорциума W3C, которые тотчас же принялись за ее доработку. Спустя несколько лет вышла в свет первая версия спецификации CSS. Затем она постоянно совершенствовалась, дорабатывалась… Но концепция оставалась все той же: каждому стилю задаются определенные свойства.

Использование таблиц CSS всегда вызывало определенные проблемы. Например, у верстальщиков часто возникали трудности с сортировкой и группировкой свойств, да и с наследованием не все так однозначно.

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

CSS для начинающих: особенности препроцессоров

Они выполняют несколько функций:

• унифицируют браузерные префиксы и хаки;

• упрощают синтаксис;

• дают возможность работать с вложенными селекторами без ошибок;

• улучшают логику стилизации.

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

Видя популярность таких надстроек, в W3C начали постепенно добавлять возможности из них в код CSS. Например, так в спецификации появилась функция calc(), которая поддерживается многими браузерами. Ожидается, что в скором времени можно будет задавать переменные и создавать миксины. Однако это произойдет в далеком будущем, а препроцессоры уже здесь и уже отлично работают.

Популярные препроцессоры CSS. Sass

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

Объявление переменных в Sass

Переменные объявляются с помощью знака $. В них можно сохранять свойства и их наборы, например: “$borderSolid: 1px solid red;”. В этом примере мы объявили переменную под названием borderSolid и сохранили в ней значение 1px solid red. Теперь, если в CSS нам потребуется создать красный border шириной в 1px, просто указывает эту переменную после названия свойства. После объявления переменные менять нельзя. Доступно несколько встроенных функций. Например, объявим переменную $redColor со значением #FF5050. Теперь в коде CSS, в свойствах какого-нибудь элемента, используем ее для задания цвета шрифта: p { color: $redColor; }. Хотите поэкспериментировать с цветом? Используйте функции darken или lighten. Это делается так: p { color: darken($redColor, 20%); }. В результате цвет redColor станет на 20 % светлее.

Вложенность

Раньше для обозначения вложенности приходилось использовать длинные и неудобные конструкции. Представим, что у нас есть div, в котором лежит p, а в нём, в свою очередь, расположен span. Для div нам нужно задать цвет шрифта red, для p - yellow, для span - pink. В обычном CSS это делалось бы следующим образом:

С помощью препроцессора CSS все делается проще и компактнее:

Элементы буквально «вкладываются» один в другой.

Директивы препроцессора

С помощью директивы @import можно импортировать файлы. Например, у нас есть файл fonts.sass, в котором объявлены стили для шрифтов. Подключаем его в основной файл style.sass: @import ‘fonts’. Готово! Вместо одного большого файла со стилями у нас есть несколько, которые можно использовать для быстрого и легкого доступа к требуемым свойствам.

Миксины

Одна из самых интересных задумок. Дает возможность одной строкой задавать целый набор свойств. Работают следующим образом:

@mixin largeFont {

font-family: ‘Times New Roman’;

font-size: 64px;

line-height: 80px;

font-weight: bold;

Чтобы применить миксин к элементу на странице, используем директиву @include. Например, мы хотим применить его к заголовку h1. Получается следующая конструкция: h1 { @include: largeFont; }

Все свойства из миксина будут присвоены элементу h1.

Препроцессор Less

Синтаксис Sass напоминает о программировании. Если вы ищете вариант, который больше подходит изучающим CSS для начинающих, обратите внимание на Less. Он был создан в 2009 году. Главная особенность - поддержка нативного так что незнакомым с программированием верстальщикам его будет проще освоить.

Переменные объявляются с помощью символа @. Например: @fontSize: 14px;. Вложенность работает по тем же принципам, что и в Sass. Миксины объявляются следующим образом: .largeFont() { font-family: ‘Times New Roman’; font-size: 64px; line-height: 80px; font-weight: bold; }. Для подключения не нужно использовать директивы препроцессоров - просто добавьте свежесозданный миксин в свойства выбранного элемента. Например: h1 { .largeFont; }.

Stylus

Еще один препроцессор. Создан в 2011 году тем же автором, что подарил миру Jade, Express и другие полезные продукты.

Переменные можно объявлять двумя способами - явно или неявно. Например: font = ‘Times New Roman’; - это неявный вариант. А вот $font = ‘Times New Roman’ - явный. Миксины объявляются и подключаются неявно. Синтаксис таков: redColor() color red. Теперь можем добавить его элементу, например: h1 redColor();.

На первый взгляд Stylus может показаться непонятным. Где «родные» скобки и точки с запятой? Но стоит только в него погрузиться, как все становится намного более ясным. Однако помните, что длительная разработка с этим препроцессором может «отучить» вас использовать классический синтаксис CSS. Это иногда вызывает проблемы при необходимости работать с «чистыми» стилями.

Какой препроцессор выбрать?

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

• если вы - программист и хотите работать со стилями как с кодом, используйте Sass;
• если вы - верстальщик и хотите работать со стилями как с обычной версткой, обратите внимание на Less;
• если вы любите минимализм, воспользуйтесь Stylus.

Для всех вариантов доступно огромное количество интересных библиотек, способных еще сильнее упростить разработку. Пользователям Sass рекомендуется обратить внимание на Compass - мощный инструмент с множеством встроенных возможностей. Например, после его установки вам уже никогда не придется беспокоиться о вендорных префиксах. Упрощается работа с сетками. Имеются утилиты для работы с цветами, спрайтами. Доступен ряд уже объявленных миксинов. Уделите этому средству пару дней - тем самым вы сэкономите немало сил и времени в будущем.