CSS-переменные в медиазапросах

Поскольку я являюсь новичком в разработке, мне достаточно трудно считывать используемую в препроцессорах вложенность свойств с помощью символа "&". Вместо формул и миксинов я предпочитаю писать обычные правила. А вместо SASS-переменных использую кастомные свойства CSS. Единственной причиной, по которой я продолжал использовать SASS, была возможность подставлять в медиазапросы переменные с контрольными точками смены раскладки страницы. Например, $tablet: 768px или $dektop: 1100px.

Именно по этой причине для меня было большой радостью узнать о существовании PostCSS-плагина «PostCSS Custom Media«, который уже сейчас позволяет использовать синтаксис кастомных медиазапросов из черновика спецификации «Media Queries Level 5«, преобразуя их в синтаксис с числовыми значением, который поддерживается браузерами.

Кроме базового описания на основной странице плагина, в отдельном документе присутствуют примеры его использования как с помощью интрументов Gulp, Webpack и других, так и в самом NodeJS.

Выдержка из спецификации

При создании документов, в которых применяются медиазапросы, нередко одни и те же выражения многократно указываются в разных местах. Например, для задания нескольких операторов @import. Повторение медиазапросов может быть рискованным. Если понадобится изменить контрольную точку, разработчику придётся изменять значения во всех встречающихся случаях. Если же изменение нужно было внести не везде, то потом придётся ещё и мучиться, отлавливая возникшие ошибки.

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

Пример

Чтоб увидеть, как именно работает плагин, давайте рассмотрим простенький пример его использования. Я буду использовать Gulp.

Объявление

Как показано на странице плагина, первым делом объявим кастомный медиазапрос. Это будет размер экрана, на котором будет применяться альтернативное CSS-правило.

@custom-media --desktop (min-width: 900px);

1. Объявление кастомного медиазапроса начинается с инструкции @ custom-media и является некоторой альтернативой ключевому слову var в языке JavaScript, создающем переменную

2. На втором месте помещается название кастомного медиазапроса --desktop, которое, как и CSS-переменные, начинается с двух дефисов

3. На последнем месте размещается непосредственно условие, являющееся в данном случае контрольной точкой ширины экрана

Использование в стилях

После создания переменной, её можно подставлять в медиазапрос вместо условия

body {   background-color: gray; }  @media (--desktop) {   body {     min-block-size: 100vh;        background-color: red;   } }

Конфигурация Gulp

Лично у меня приведённый в документации код настроек gulpfile.js не сработал, поэтому я его немного изменил

const gulp = require("gulp") const postcss = require("gulp-postcss"); const postcssCustomMedia = require("postcss-custom-media"); const rename = require("gulp-rename");  gulp.task("css", function() {   return gulp.src("./src/style.css")     .pipe(postcss([       postcssCustomMedia()     ]))     .pipe(rename("style.css"))     .pipe(gulp.dest(".")) });

Результат

После обработки мы получаем привычно оформленные стили

body {   background-color: gray; }  @media (min-width: 900px) {   body {     min-block-size: 100vh;        background-color: red;   } }

Заключение

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

Желаю всем приятной разработки.