使用 css 变量（不使用 SASS/LESS）设置媒体查询的最小/最大宽度？

Question

我正在为自己开发一个新的入门主题。其中，我希望在整个主题中使用许多断点。我不想管理每个媒体查询的断点，而是想将 CSS 变量设置为断点像素值并调用媒体查询内的变量。下面是一个示例（理想情况下）这是如何工作的

:root {
  --medium: 1024px;
}

p {
  color: black;
}

@media screen and ( min-width: var(--medium) ) {
  p {
    color: red;
  }
}

<p>Text I want to be red in screens larger than 1024px.</p>

遗憾的是，这个逻辑在常规 CSS/CSS3 中不起作用。有谁熟悉创建一个单点的方法，我可以在不使用预处理器的情况下调整整个主题的媒体查询断点？提前致谢！

Answer 1

正如 @rangerz 上面提到的，目前这是不可能的。

我已经开始将媒体查询中的实际值放在所有标有注释的 CSS 文件中：

:root {
    --breakpoint-md-max: 767.98px /*var(--breakpoint-md-max)*/;
    --breakpoint-md-min: 768px /*var(--breakpoint-md-min)*/;
}

@media (min-width: 768px /*var(--breakpoint-md-min)*/ ) {
    #body {
        background: green;
    }
}

如果我需要更改这个“常量”值，这使我可以进行全局替换。

另外，有一天，当支持 env() 时，我可以一次性消除这个难看的缺陷。:)