Вступление

css3-препроцессоры - это языки, написанные с единственной целью - добавить классные, изобретательные функции в CSS, требуя минимального, но эффективного кода.
Они делают это путем компиляции (и минимизации) кода, который мы пишем, в обычный CSS, который можно использовать в любом браузере, поддерживая совместимость с браузером.

особенности

Есть тысячи функций, которые препроцессоры css вносят в таблицу. Ниже приведены некоторые из наиболее известных и основных функций:
(Обратите внимание: представленные примеры могут отличаться от процессора к процессору.)

Переменные

Переменные позволяют легко управлять многими ссылочными свойствами, просто манипулируя переменной.
Пример:

$mainColor: blue;
body { color: $mainColor; }

Некоторые другие функции, такие как миксины и импорт стилей, используют аналогичный метод однократного объявления переменных или набора стилей с последующим обращением к ним.
Это может сэкономить много времени и дублировать код.

Гнездование

Вложенность используется, когда несколько элементов имеют один и тот же родительский элемент в нашем CSS, что интуитивно ускоряет процесс записи.
Необработанный CSS:

section {
    margin: 10px;
    nav { height: 25px; }
}

CSS после компиляции:

section { margin: 10px; }
section nav { height: 25px; }

Некоторые другие функции, такие как совместимость с браузером и наследование, превращают простой CSS-подобный код в CSS, который можно использовать в кросс-браузере.

Популярные препроцессоры

• sass - документация
• меньше - документация
• стилус - документация
• csscrush - документация
• myth- документация