CSS変数

Question

のは、私がbox-shadow性質を持っているとしましょう：私は#cccから変数を作成したい場合は

box-shadow: 5px 5px 0 #ccc;

何？ SCSSでは、次のようなことができます。

$grey: #ccc; 

.element { 
    box-shadow: 5px 5px 0 $grey; 
} 

しかし、ネイティブCSS変数では機能しません。それとも、私は何かを逃している？

Answer 1

CSS変数は実験的な機能であり、現時点ではサポートされていません（IEではサポートされていません.Edgeは考慮されています.FirefoxとChrome - 最新バージョンは問題ありません）。ここではそれについての詳細情報：ここhttp://caniuse.com/#search=css%20variables

// declaring a variable 
.element { 
    --variable: #ccc; 
} 
// using a variable 
.other-element { 
    box-shadow: 0 2px 3px var(--variable); 
} 

さらに詳しい情報：https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables

Answer 2

Guysは、私はそれが新鮮な機能を知っているが、それはすでにクロームの安定版に上陸していますので、あなたはそれが実験呼び出すことはできません。

私の場合は、解決策が見つかりました。私は別の変数でその色を再利用して、それを実際のプロパティでのみ使用することができます。次に例を示します。

:root { 
    --focus-input-color: #6db3fd; 
    --box-shadow-focus: 3px 3px 0 var(--focus-input-color), 
         -3px -3px 0 var(--focus-input-color), 
         -3px 3px 0 var(--focus-input-color), 
         3px -3px 0 var(--focus-input-color); 
} 
.element { 
    box-shadow: var(--box-shadow-focus); 
} 

私はプロパティに直接--box-shadow-focusを使用する場合、これは動作し、なぜそれが動作しない理由を私は知らないが、それは、それが持っているものクローム49