Какие знаешь препроцессоры

Наиболее популярные CSS-препроцессоры:

1. Sass/SCSS - самый распространённый, с расширенным синтаксисом (переменные, миксины, вложенность). SCSS - синтаксис с фигурными скобками, Sass - с отступами.

$primary-color: #333;

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

2. Less - похож на Sass, но с более простым синтаксисом, компилируется на клиенте через JS.

3. Stylus - минималистичный синтаксис без обязательных скобок и точек с запятой.

primary-color = #333

.button
  background primary-color
  &:hover
    background lighten(primary-color, 10%)

Препроцессоры добавляют:

• Переменные
• Вложенность
• Миксины
• Импорты
• Математические операции
• Функции для работы с цветами

Сейчас чаще используют Sass/SCSS из-за мощного функционала и интеграции с большинством сборщиков.