Для чего нужен CSS препроцессор?

CSS-препроцессор (Sass, Less, Stylus) — язык поверх CSS с дополнительными возможностями, который при сборке компилируется в обычный CSS.

Что он даёт

• Переменные ($primary) — исторически главное преимущество.
• Миксины — переиспользуемые наборы правил с параметрами.
• Функции и вычисления — работа с цветами, циклы, условия.
• Модули — разбиение на файлы с @use без лишних запросов в браузере.
• Вложенность — компактная запись связанных селекторов.

@use 'sass:color';
$primary: #0066ff;

@mixin focus-ring { outline: 2px solid $primary; outline-offset: 2px; }

.button {
  background: $primary;
  &:hover { background: color.adjust($primary, $lightness: -10%); }
  &:focus-visible { @include focus-ring; }
}

Нужен ли он сейчас

Нативный CSS уже умеет переменные (custom properties), вложенность и color-mix(). Препроцессор по-прежнему полезен для миксинов, циклов и больших дизайн-систем, но в новых проектах всё чаще обходятся чистым CSS.

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

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

Подробнее: Sass — Basics