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(-)，这段代码工作得很好。我确信这只是语法上的一个问题，但是CSSnext文档并没有非常清楚地使用变量。

Answer 1

cssnext只实现未来的防伪规范。根据规范，不可能在媒体查询中使用自定义属性(“取决于dom (:root是html)”(它不依赖于dom，而是取决于设备)。

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

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

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

其他一些信息

• http://cssnext.io/features/#custom-media-queries
• https://github.com/MoOx/postcss-cssnext/issues/253