Что такое предпроцессор

Предпроцессор — это инструмент, который расширяет возможности CSS, добавляя переменные, миксины, вложенность и другие удобные функции. Наиболее популярные: Sass, Less, Stylus.

Пример на Sass:

$primary-color: #3498db;

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

Преимущества:

• Переменные для повторяющихся значений
• Вложенность селекторов
• Миксины для переиспользуемых стилей
• Функции для манипуляций с цветами и значениями

После написания код компилируется в обычный CSS.