CSS Processors
CSS процессоры призваны упростить написание CSS.
Pre-processor#
Препроцессор читает файл похожий по синтаксису на CSS и генерирует CSS, который поймет браузер.
Препроцессоры позволяют писать CSS, используя привычные для языков программирования конструкции:
- переменные (есть в CSS 3)
- циклы
- наследование свойств
- модули и импорты
Рассмотрите эти возможности на примере препроцессора Sass.
Некоторые из их возможностей и так доступны в стандарте CSS 3, но его "не знают" старые браузеры.
- Sass оригинальная реализация на Ruby, актуальная на Node.js. Используется в Bootstrap начиная с 4-й версии.
- Less оригинальная реализация на JavaScript, использовался в Bootstrap по 3-ю версию.
Post-processors#
Если препроцессоры выполняются при сборке сайта, то постпроцессоры в самом браузере. Они берут за основу возможности CSS 3 и в браузере пользователя перестраивают его для браузеров, которые не поддерживают современные возможности CSS.
Работа сообща#
Оптимального результата можно добиться используя пре- и пост-процессоры вместе. Препроцессор будет реализовывать не доступные в CSS возможности, к примерку циклы. А постпроцессор будет дополнять CSS специфическими для браузера пользователя свойствами, если он не поддерживает стандарт. Таким образом можно минимизировать размер CSS файла (он не будет содержать свойства для конкретных браузеров, с vendor profixes типа -moz- и -webkit-).