Variable within an another variable

css

Solution

It's possible. In the following example the variable `--theme-primary` gets the value of `--color-yellow`. If it is not possible (the variable `--color-yellow` isn't defined or not valid) `--theme-primary` would be black (`#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>

You can also use a variable as fallback (second parameter of `val`). So you can do something like `var(--theme-primary, var(--theme-secondary, white));`

Additional links:

- Browser support on Can I Use: http://caniuse.com/#feat=css-variables

- Using CSS variables on Mozilla Developer Network: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables

- Specification on W3C: https://www.w3.org/TR/css-variables-1/

Problem

Is it possible to let a property variable have a value of an another variable? Like this: ``` :root { --theme-primary: --color-red; --color-red: #F44336; } ``` ... or: ``` :root { --theme-primary: var(--color-red); --color-red: #F44336; } ``` If possible, what is the code, without using JS as possible?

Original source