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文档并没有非常清楚地使用变量。

Answer 1

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

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

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

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

其他一些信息