Что такое CSS-препроцессор

Ответ

Препроцессор — это инструмент, который обрабатывает код перед его компиляцией или интерпретацией, добавляя дополнительные возможности, упрощая синтаксис или автоматизируя рутинные задачи. В веб-разработке популярны CSS-препроцессоры (Sass, Less) и HTML-препроцессоры (Pug).

Пример с Sass:

$primary-color: #3498db;

.button {
  background: $primary-color;
  &:hover {
    background: darken($primary-color, 10%);
  }
}

После обработки препроцессором превращается в:

.button {
  background: #3498db;
}
.button:hover {
  background: #2980b9;
}

Плюсы:

Переменные, миксины, вложенность
Лучшая читаемость и поддержка кода
Автоматизация (например, добавление вендорных префиксов)