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