Препроцессорный код

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

Основная идея, которую порой озвучивают философы, - постпроцессоры лучше, чем препроцессоры.

На такую формулировку в голову приходит один классический вопрос, что лучше - кушать или дышать?

Чувствуете, что слово "или" здесь неуместно!?

Препроцессоры vs постпроцессоры - в корне неправильная постановка вопроса!

Каждый из уровней преобразования кода решает свои задачи.

• Препроцессоры приносят необходимые элементы программирования в процесс написания стилей. То есть препроцессоры преобразуют код, написанный на придуманном языке, в CSS.
• Постпроцессоры работают над настоящим, корректным CSS-кодом, автоматически совершенствуют его.

Также обращаем внимание на ещё одно заблуждение. Расхожая фраза: "зачем мне препроцессоры, у меня postcss и его плагины, там тоже есть переменные и примеси, если нужно".

Дело в том, что не все плагины postcss - постпроцессоры! Например, precss, дающий стиль, похожий на SCSS, - тоже препроцессор. Вершина непонимания обычно выглядит так. Верстальщик любит поговорить, что ему не нужны препроцессоры, у него, мол, postcss. Смотришь, а там плагин precss для переменных и примесей. Что это, если не препроцессор?

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

Примеси делают код короче!

Особенно, когда речь идёт про вёрстку по сетке.

Во-первых, задание размера элемента идеально превращается в функцию, так как зависит от одного параметра:

.size(@n){
   width: calc(100% / 12 * @n - 30px);
}

12 колонок и 30px здесь константы, так как они определяются один раз дизайнером при создании сетки макета.

Во-вторых, на каждую контрольную точку можно создать примесь, например:

.size-sm(@n){
   @media screen and (max-width: 768px){
      width: calc(100% / 12 * @n - 30px);
   }
}

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

Напишем:

.userCard{
   box-sizing: border-box;
   margin: 15px;
   .size(3);
   .size-md(4);
   .size-sm(6);
   .size-xs(12);
}

Получим:

.userCard{
   box-sizing: border-box;
   margin: 15px;
   width: calc(100% / 4 - 30px);
}
 
@media screen and (max-width: 992px){
   .userCard{
      width: calc(100% / 3 - 30px);
   }
}
 
@media screen and (max-width: 720px){
   .userCard{
      width: calc(100% / 2 - 30px);
   }
}
 
@media screen and (max-width: 576px){
   .userCard{
      width: calc(100% - 30px);
   }
}

Не секрет, что в том же boostrap есть возможность работать с препроцессорной сеткой. Однако перспектива писать код вида:

@include media-breakpoint-up('md'){
   @include make-col(3);
}

не вдохновляет! Сказывается то, что написанный SCSS-код в bootstrap заточен на генерацию CSS-сетки, а не на удобное использование примесей.

Заключение.

Если вы не согласны с изложенными выше мыслями, скорее всего, вам больше подойдёт другой стиль вёрстки, а не такой, который предлагает smart-grid.

Если же перечисленные выше идеи кажутся логичными, то остаётся где-то найти удобную препроцессорную библиотеку. Здесь и появляется Smart Grid - модуль , генерирующий препроцессорный файл по заданным настройкам.