CSS-препроцессоры прекрасны, они сделали революцию в мире интернет-вёрстки. Создание кросс-браузерного CSS стало гораздо проще, потому что все вендорные префиксы и хаки можно завернуть в примеси, заглушки или что у вас там. До сих пор этого вполне хватало, но так как мы неистово одержимы контролем, хотим большего. Всегда. БОООООЛЬШЕ. Скажи привет CSS-постпроцессорам!

Postprocessing? я запутался!

Это неудивительно, мне кажется “postprocessing” не слишком подходящим словом, но он вполне способно донести саму суть – CSS-препроцессоры (Sass, Less и т.д.) читают и собирают язык расширения в CSS, тогда как постпроцессоры читают и собирают сам CSS. Это ужасно, простите, но если вы но если было непонятно, то теперь всё должно встать на свои места.

Уже существует несколько постпроцессоров, например – Autoprefixer, PostCSS и rework.

Зачем использовать постпроцессор?

Что ж, давайте возьмём для примера Autoprefixer, он читает ваш CSS и добавляет вендорные префиксы, используя при этом базу данных Can I Use. Представьте, что вы пишете на Sass и хотите применить правило из CSS3, плохо поддерживаемое без префиксов, так что используете примесь:

@mixin box-sizing($value) {
  -webkit-box-sizing: $value;
     -moz-box-sizing: $value;
          box-sizing: $value;
}
.box {
  @include box-sizing(border-box);
}

Почему Autoprefixer лучше? Потому что можно вот так:

.box {
  box-sizing: border-box;
}

Читать дальше →