Какие CSS-препроцессоры важны на практике и как их применять?

Основные CSS-препроцессоры — Sass/SCSS, Less и Stylus. Сейчас фактически стандартом стал Sass, а часть задач берёт на себя PostCSS.

Sass (SCSS)

Самый популярный: модули через @use, миксины, функции, циклы, работа с цветами. Синтаксис SCSS — надмножество CSS.

@use 'sass:map';
$breakpoints: (md: 768px, lg: 1024px);

@mixin from($bp) {
  @media (min-width: map.get($breakpoints, $bp)) { @content; }
}

.grid { @include from(md) { display: grid; } }

Less

Похож на Sass, раньше использовался в Bootstrap 3. Сейчас встречается в основном в старых проектах (например, Ant Design до v5, который перешёл на CSS-in-JS).

Stylus

Гибкий синтаксис без скобок и точек с запятой, сейчас используется редко.

PostCSS

Не препроцессор в классическом смысле, а инструмент для плагинов: Autoprefixer, поддержка будущего синтаксиса, минификация. Часто идёт в паре с Sass или вместо него.

Как применять

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

Коротко для собеседования

Sass/SCSS — основной препроцессор, Less и Stylus встречаются реже; PostCSS дополняет их плагинами, а часть возможностей уже есть в самом CSS.

Подробнее: Sass — Документация