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

【问题标题】：CSSNEXT: how to use variables with media queries in CSS NextCSSNEXT：如何在 CSS 中将变量与媒体查询一起使用
【发布时间】：2016-05-28 10:37:43
【问题描述】：

我正在尝试通过 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 文档并没有很清楚地说明变量的使用。

【问题讨论】：

【解决方案1】：

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

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

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

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

其他一些信息

【讨论】：