別の変数内の変数

Question

変数の変数の値がもう1つの変数になることは可能ですか？

:root { 
    --theme-primary: --color-red; 
    --color-red: #F44336; 
} 

...または：このよう

:root { 
    --theme-primary: var(--color-red); 
    --color-red: #F44336; 
} 

可能な場合は、コードが可能としてJS を使用せずに、何ですか？

Answer 1

可能です。次の例では、変数--theme-primaryは--color-yellowの値を取得します。可能でない場合（変数--color-yellowが定義されていないか、有効でない）、--theme-primaryは黒（#000）になります。

:root { 
 
    --theme-primary: var(--color-yellow, #000); 
 
    --color-yellow: yellow; 
 
    --color-blue: blue; 
 
} 
 
:root { 
 
    --theme-secondary: var(--color-blue); 
 
} 
 
div { 
 
    background: var(--theme-primary, green); 
 
    border:5px dashed var(--theme-secondary, white); 
 
    height:100px; 
 
    width:100px; 
 
}

<div>Hello World</div>

また、フォールバックとして変数（valの2番目のパラメータ）を使用することができます。だから、var(--theme-primary, var(--theme-secondary, white));

追加リンクのような何かを行うことができます：

• ブラウザのサポートを私は使用することができます上：
  http://caniuse.com/#feat=css-variables
• をMozillaの開発者ネットワーク上のCSS変数を使用：
  https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables
• W3Cの仕様：
  https://www.w3.org/TR/css-variables-1/