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

CSS препроцессоры (Sass, Less, Stylus) упрощают написание стилей, добавляя возможности, которых нет в чистом CSS:

1. Переменные – хранение цветов, размеров и других значений для повторного использования:

$primary-color: #3498db;
.button { background: $primary-color; }

2. Вложенность – более читаемая структура кода:

.nav {
  ul { margin: 0; }
  li { display: inline-block; }
}

3. Миксины – переиспользуемые блоки стилей:

@mixin border-radius($radius) {
  border-radius: $radius;
}
.box { @include border-radius(10px); }

4. Импорты – разбиение кода на модули.
5. Наследование через @extend.
6. Математические операции прямо в стилях.

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