CSSの変数 - なぜ使用できないのですか？

Question

私はしばらく私を悩ましく、私はどこでも答えを見つけることができません：WHY私たちは変数を使用することができますか？

私たちは人生をはるかに簡単にするSASSとLESSプリプロセッサについて知っています。たとえば変数を使用するだけです。 W3CがCSS自体にまだそのような機能を実装していないという特別な理由はありますか？

すべての開発者（W3Cの開発者も）は、これが大きな前進だと考えていると思います。まだ取られていない理由はありますか？ http://caniuse.com/css-variables/embed

あなたが/ CSSの変数で始める必要がありますすることができます。..

Answer 1

私の研究を締結しますCSSの変数の利点。

CSSで再利用可能な値を設定するには、カスタムプロパティの表記法を使用して宣言する必要があります。 --main-color: black;

次に、var（）関数を使用してスタイルファイル内のどこにでもアクセスできます。 color: var(--main-color);

以下の作業例：伝統的な変数は（あなたがそれらを理解する可能性があるとして）CSSがどのように動作するかに適合しないので、

: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/

が、サポートは今問題のビットです..しかし、それはそこにありますあなたは、TにSASSあるいはLESSを使用する必要はありません

： https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables