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

Sass (SCSS), Less и Stylus — самые популярные CSS-препроцессоры.

Sass/SCSS – самый распространённый, поддерживает вложенность, переменные, миксины, циклы, условия. SCSS – синтаксис, совместимый с CSS.

$primary-color: #333;

.button {
background: $primary-color;
&:hover {
opacity: 0.8;
}
}

**Less** – похож на Sass, но с более простым синтаксисом, работает на JavaScript.  

```less
@primary-color: #333;

.button {
  background: @primary-color;
  &:hover {
    opacity: 0.8;
  }
}

Stylus – гибкий синтаксис (можно писать без скобок и точек с запятой), поддерживает все возможности препроцессоров.

primary-color = #333

.button
  background primary-color
  &:hover
    opacity 0.8

Все они компилируются в обычный CSS и упрощают разработку.