CSS-препроцессоры — это «программистский» подход к CSS. Они позволяют при написании стилей использовать свойственные языкам программирования приёмы и конструкции: переменные, вложенность, наследуемость, циклы, функции и математические операции. Синтаксис препроцессоров похож на обычный CSS. Код, написанный на языке препроцессора, не используется прямо в браузере, а преобразуется в чистый CSS-код с помощью специальных библиотек.

Три самых известных препроцессора — это Less, SASS и Stylus. Они во многом похожи между собой, но имеют и ключевые различия. В этом и последующих частях цикла мы рассмотрим препроцессор Less.

в тренажёре по Less мы будем шаг за шагом строить небольшой велосипед фреймворк компонентов. Когда он будет готов, мы сможем собирать из компонентов цельные интерфейсы. Компонентный подход позволяет структурировать большие объёмы кода и легко масштабировать проекты. Препроцессор в этом деле — хорошее подспорье.

В этом тренажёре редактор CSS заменён на редактор Less. Чтобы увидеть скомпилированный из Less кода CSS код, можете использовать кнопку CSS в правом верхнем углу редактора.

Итак, теперь вы знаете всё, чтобы начать!