CSS中的变量 - 为什么不能使用它们？

Question

这让我很困扰，并且我无法在任何地方找到答案：为什么不是纯粹的CSS允许我们使用变量？

我们都知道SASS和LESS预处理器让我们的生活变得如此简单 - 例如让我们使用变量。为什么W3C还没有在CSS中实现这样的功能？

我想所有的开发者（也来自W3C的）都会同意这将是一个很大的进步。有没有什么特别的原因，为什么还没有采取（还）？

Answer 1

在结束我的研究：

你不必使用SASS以下为t在CSS中的变量的优势。

要在CSS中设置一些可重用值，您必须使用自定义属性表示法来声明它们。 --main-color: black;

然后，您可以使用var（）函数在样式文件中的任何位置访问它们。下面color: var(--main-color);

工作例如：

:root { 
 
    --main-theme-color: red; 
 
} 
 

 
.one { 
 
    background-color: var(--main-theme-color); 
 
    margin: 10px; 
 
    width: 50px; 
 
    height: 50px; 
 
} 
 

 
.two { 
 
    background-color: var(--main-theme-color); 
 
    margin: 10px; 
 
    width: 50px; 
 
    height: 50px; 
 
} 
 
.three { 
 
    background-color: var(--main-theme-color); 
 
    margin: 10px; 
 
    width: 50px; 
 
    height: 50px; 
 
} 
 
.four { 
 
    background-color: black; 
 
    color: var(--main-theme-color); 
 
    margin: 10px; 
 
    width: 50px; 
 
    height: 50px; 
 
}

<div class="one"> </div> 
 
<div class="two"> </div> 
 
<div class="three"> </div> 
 
<div class="four"> RED </div>

Answer 2

也有被称为规范自定义属性 https://www.w3.org/TR/css-variables-1/

但支持是有点问题，现在..但它的存在.. http://caniuse.com/css-variables/embed

你可以/应该使用CSS变量启动 https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables