媒体查询中的 CSS 变量

许多新手开发人员发现很难使用"&"符号读取预处理器中使用的嵌套属性。他们更喜欢写常规规则，而不是公式和混合。而不是 SASS 变量，它们使用 CSS 自定义属性。

在这种情况下，继续使用 SASS 的唯一原因是能够将可变断点添加到媒体查询中以更改布局。例如，或 .$tablet: 768px$dektop: 1100px

这就是为什么我很高兴地了解到后CSS插件后CSS定制媒体的存在。这允许您使用来自媒体查询 5 级规范草案的自定义媒体查询的语法，并将它们转换为浏览器支持的数值数据类型语法。

除了插件主页上的基本描述外，单独的文档还包含在gulp、webpack等的帮助下以及node.js中使用该插件的例子。


规格摘录

在创建使用媒体查询的文件时，可能会在不同的地方重复相同的表达方式，例如，指定多个语句。重复媒体查询可能有风险。如果需要更改断点，开发人员必须更改所有情况下的值。如果在某些情况下需要更改，则很难抓住已出现的错误。@import

为了避免这种情况，该规范描述了定义自定义媒体查询的方法，这些查询只是用于更长、更复杂的常规媒体查询的简称别名。因此，在几个地方使用的媒体查询可以替换为一个自定义查询，该查询将根据需要重复使用多次。如果你需要改变它的价值，你只需要这样做一次。

例

要查看插件的工作原理，让我们考虑一个简单的使用示例。我会用gulp。

公告

如插件页面所示，第一步是声明自定义媒体查询。这将是替代CSS规则将适用的屏幕大小。
@custom-media --desktop (min-width: 900px);

自定义媒体查询声明以声明开始。它是 JavaScript 中关键字的替代方案，并创建一个变量。@custom-media var

第二个位置被自定义媒体查询名称占据，该名称与 CSS 变量一样，以两个连字符开始。--desktop

然后是条件，在这种情况下是屏幕宽度断点。

在样式中使用
创建变量后，您可以在媒体查询中使用该变量，而不是此条件。

CSS
body {
background-color: gray;
}

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

gulp配置
文档中给出的配置代码不起作用，因此我更改了一点。gulpfile.js

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("."))
});

结果
处理后，我们得到以下常规样式：

CSS
body {
background-color: gray;
}

@media (min-width: 900px) {
body {
min-block-size: 100vh;
background-color: red;
}
}
结论
我很高兴我们克服了纯CSS的最后一道障碍。祝大家网络开发愉快！

本文章由javascript技术分享原创和收集