CSS 是否有支持变量的计划？

Question

我知道我可以使用框架 (http://lesscss.org) 来完成这个，但我想知道纯 CSS 是否会随时支持这个？

Answer 1

语法示例如下：

:root {
  --main-color: #06c;
  --accent-color: #006;
}
/* The rest of the CSS file */
#foo h1 {
  color: var(--main-color);
}

目前不确定浏览器兼容性。我认为 Chrome 和 Firefox 可能支持它，但我怀疑 IE 是否支持。

Answer 2

可能不会，可能是因为跨浏览器兼容性。想象一下，将您的样式 sheet 中的颜色设置为变量，而使用较旧或支持较少的浏览器的人可能无法读取变量，因此该网站不会获得任何颜色！我只想使用像 SASS 这样的预处理器来解决这个问题。

Answer 3

Does CSS have any plans to support variables?

除了计划之外，它还有一个 W3C candidate recommendation, implementations such as Chrome here and Firefox here, and and Edge implementation roadmap here. Here is a full support matrix，表明它们目前在 FF 和 Chrome 中可用。

A google for "css variables" 调出 MDN page，它详细描述了当前情况。

I know I can use frameworks (http://lesscss.org) to accomplish this

True CSS 变量服从级联。从这个意义上说，它们比 LESS（这是一个预处理器，不是顺便说一下，框架）等预处理器中实现的变量要强大得多。

Answer 4

今天，我们有 40% 的全球用户支持 CSS 变量，您可以在此处查看： http://caniuse.com/#search=variables（又名自定义属性）

CSS 是否有支持变量的计划？

Does CSS have any plans to support variables?

css

css-variables