Поскольку я являюсь новичком в разработке, мне достаточно трудно считывать используемую в препроцессорах вложенность свойств с помощью символа "&". Вместо формул и миксинов я предпочитаю писать обычные правила. А вместо SASS-переменных использую кастомные свойства CSS. Единственной причиной, по которой я продолжал использовать SASS, была возможность подставлять в медиазапросы переменные с контрольными точками смены раскладки страницы. Например, $tablet: 768px или $dektop: 1100px.
Именно по этой причине для меня было большой радостью узнать о существовании PostCSS-плагина "PostCSS Custom Media", который уже сейчас позволяет использовать синтаксис кастомных медиазапросов из черновика спецификации "Media Queries Level 5", преобразуя их в синтаксис с числовыми значением, который поддерживается браузерами.
Кроме базового описания на основной странице плагина, в отдельном документе присутствуют примеры его использования как с помощью интрументов Gulp, Webpack и других, так и в самом NodeJS.
Чтобы избежать этого, в данной спецификации описаны методы определения кастомных медиазапросов, которые являются упрощёнными псевдонимами более длинных и сложных обычных медиазапросов. Таким образом, медиазапрос, используемый в нескольких местах, может быть заменён одним кастомным, который будет переиспользован столько раз, сколько понадобится. А если понадобится изменить его значение, это нужно будет сделать только в одном месте.
Объявление
Как показано на странице плагина, первым делом объявим кастомный медиазапрос. Это будет размер экрана, на котором будет применяться альтернативное CSS-правило.
@custom-media --desktop (min-width: 900px);
После создания переменной, её можно подставлять в медиазапрос вместо условия
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;
}
}
Желаю всем приятной разработки.
habr.com
Именно по этой причине для меня было большой радостью узнать о существовании PostCSS-плагина "PostCSS Custom Media", который уже сейчас позволяет использовать синтаксис кастомных медиазапросов из черновика спецификации "Media Queries Level 5", преобразуя их в синтаксис с числовыми значением, который поддерживается браузерами.
Кроме базового описания на основной странице плагина, в отдельном документе присутствуют примеры его использования как с помощью интрументов Gulp, Webpack и других, так и в самом NodeJS.
Выдержка из спецификации
При создании документов, в которых применяются медиазапросы, нередко одни и те же выражения многократно указываются в разных местах. Например, для задания нескольких операторов @import. Повторение медиазапросов может быть рискованным. Если понадобится изменить контрольную точку, разработчику придётся изменять значения во всех встречающихся случаях. Если же изменение нужно было внести не везде, то потом придётся ещё и мучиться, отлавливая возникшие ошибки.Чтобы избежать этого, в данной спецификации описаны методы определения кастомных медиазапросов, которые являются упрощёнными псевдонимами более длинных и сложных обычных медиазапросов. Таким образом, медиазапрос, используемый в нескольких местах, может быть заменён одним кастомным, который будет переиспользован столько раз, сколько понадобится. А если понадобится изменить его значение, это нужно будет сделать только в одном месте.
Пример
Чтоб увидеть, как именно работает плагин, давайте рассмотрим простенький пример его использования. Я буду использовать Gulp.Объявление
Как показано на странице плагина, первым делом объявим кастомный медиазапрос. Это будет размер экрана, на котором будет применяться альтернативное CSS-правило.
@custom-media --desktop (min-width: 900px);
- Объявление кастомного медиазапроса начинается с инструкция @ custom-media и является некоторой альтернативой ключевому слову var в языке JavaScript, создающем переменную
- На втором месте помещается название кастомного медиазапроса --desktop, которое, как и CSS-переменные, начинается с двух дефисов
- На последнем месте размещается непосредственно условие, являющееся в данном случае контрольной точкой ширины экрана
После создания переменной, её можно подставлять в медиазапрос вместо условия
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 преодолена. Хотя я и не зарекаюсь, что со временем могу снова вернуться или хотя бы периодически прибегать к работе с препроцессорами.Желаю всем приятной разработки.
CSS-переменные в медиазапросах
Поскольку я являюсь новичком в разработке, мне достаточно трудно считывать используемую в препроцессорах вложенность свойств с помощью символа "&" . Вместо формул и миксинов я предпочитаю писать...
habr.com