Как возникли препроцессоры

Препроцессоры появились для упрощения и расширения возможностей CSS. Основные причины их возникновения:

1. Повторное использование кода - миксины, переменные, функции
2. Улучшение читаемости - вложенные правила, математические операции
3. Автоматизация рутинных задач - генерация вендорных префиксов

Пример на SCSS:

$primary-color: #3498db;

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

.container {
  @include center-content;
  background: lighten($primary-color, 20%);
}

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