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 преодолена. Хотя я и не зарекаюсь, что со временем могу снова вернуться или хотя бы периодически прибегать к работе с препроцессорами.

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