postcss - CSSNEXT：如何在 CSS 中将变量与媒体查询一起使用

Question

我正在尝试使用变量来使用 CSSnext 插件指定断点。

目前我的CSS看起来像这样：

@media (width <= var(--screen-md-min)) {
    background-color: var(--brand-purple-dark);    
}

但是当我尝试运行它时，我在控制台中收到以下警告：

5: Missing @custom-media definition for '--screen-md-min'. The entire rule has been removed from the output.

如果我将 var(--screan-md-min) 替换为实际像素，则此代码可以正常工作。我确信这只是语法问题，但 CSSnext 文档并没有很清楚地说明变量的使用。

score 9 · Accepted Answer

cssnext 只实现了面向未来的规范。根据规范，在媒体查询（不依赖于 dom，而是依赖于设备）中，不能使用自定义属性（这取决于 dom（:root 是 html））。

然而，从事 CSS 规范工作的人已经考虑了自定义媒体查询的解决方案。是@custom-media。

@custom-media --small-viewport (width < 30rem);

@media (--small-viewport) {
   /* styles for small viewport */
}

其他一些信息

1 回答 1