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

Препроцессоры (например, SASS, LESS) упрощают написание CSS, добавляя полезные возможности:

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

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

2. Вложенность – улучшает читаемость

.nav {
  ul { margin: 0; }
  a { color: #fff; }
}

3. Миксины – переиспользуемые куски кода

@mixin flex-center {
  display: flex;
  justify-content: center;
}
.header { @include flex-center; }

4. Импорты – разбивают стили на модули

@import 'variables';
@import 'buttons';

5. Математика – вычисления прямо в стилях

.container { width: 100% / 3; }

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