Разница между Sass, Less, SCSS

Современная фронтенд-разработка обросла целым зоопарком технологий, многие из которых кажутся избыточными, предлагая лишь косметические отличия. Препроцессоры были «первой волной» усложнения, предлагая почти идентичные возможности под разным синтаксическим соусом. Сначала появился Sass, затем набрал популярность Less, а следом за ним индустрию покорил SCSS. Разные CSS-фреймворки базируются на разных CSS-препроцессорах, знать особенности каждого из них и уметь переключаться между синтаксисами стало обязательным требованием для любого фронтендера.

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

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

Пример использования SCSS в моей PhpStorm.

Теория и примеры Sass

Теория и примеры Less

Теория и примеры SCSS

Проект шаблона Bootstrap 3

Необходимо разделение кода фреймворка и собственных правок. Вместо того чтобы «хакать» исходники библиотеки, правильнее создать отдельный файл, например, bootstrap-overrides.less. Далее этот файл подключается в самом конце основного файла bootstrap.less, попутно отключаются ненужные компоненты (вроде тяжелых каруселей или лишних кнопок).

Это помогает избежать конфликтов при обновлении версии Bootstrap, и выглядит максимально аккуратно: код библиотеки отдельно, ваш — отдельно. В итоге структура главного файла сборки выглядит примерно так:

// Core variables and mixins — база фреймворка
@import "variables.less";
@import "mixins.less";

// Здесь подключаем только те компоненты, которые реально используем
@import "grid.less";
@import "forms.less";
@import "buttons.less";

...

// Utility classes — вспомогательные классы
@import "utilities.less";
@import "responsive-utilities.less";

// Overrides - подключаем свои правки в самом конце
@import "../../less/bootstrap-overrides.less";