Variable innerhalb einer anderen Variablen

Question

Ist es möglich, eine Eigenschaft Variable einen Wert von einer anderen Variable haben?

So:

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

... oder:

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

Wenn möglich, was der Code ist, ohne JS mit wie möglich?

Answer 1

Es ist möglich. Im folgenden Beispiel erhält die Variable --theme-primary den Wert --color-yellow. Wenn es nicht möglich ist (die Variable --color-yellow ist nicht definiert oder nicht gültig) --theme-primary wäre schwarz (#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>

Sie können auch eine Variable als Ausweich (zweiter Parameter von val) verwenden. So können Sie so etwas wie var(--theme-primary, var(--theme-secondary, white));

Weiterführende Links tun:

• Browser-Unterstützung auf Kann ich:
  http://caniuse.com/#feat=css-variables
• Mit CSS Variablen auf Mozilla Developer Network:
  https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables
• Spezifikation auf W3C:
  https://www.w3.org/TR/css-variables-1/