Зачем нужны препроцессоры?

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

Что дают препроцессоры

• Переменные — переиспользуемые значения (сейчас частично есть в CSS через --var).
• Вложенность — селекторы внутри селекторов, повторяющая структуру HTML.
• Миксины — переиспользуемые блоки правил с параметрами.
• Функции и операции — вычисления, работа с цветами.
• Партиалы и @import/@use — разбиение стилей на модули.
• Циклы и условия — генерация правил.

$primary: #6b46ff;

.button {
  color: $primary;
  &:hover { color: darken($primary, 10%); } // вложенность + функция
}

@mixin flex-center { display: flex; align-items: center; justify-content: center; }
.box { @include flex-center; }

Зачем

• Меньше дублирования (DRY), удобнее поддержка.
• Структурированные, модульные стили.
• Ускоряют написание больших стилевых систем.

Актуальность

Современный CSS перенял многое (кастомные свойства, вложенность), плюс есть PostCSS и CSS Modules — необходимость в препроцессорах снизилась, но Sass всё ещё широко используется.

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

Препроцессоры (Sass/Less) добавляют в CSS переменные, вложенность, миксины, функции, модульность и циклы — уменьшают дублирование и упрощают поддержку. Компилируются в обычный CSS. Современный CSS перенял часть возможностей, но Sass по-прежнему популярен.