Variable within an another variable

Question

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?

Since CSS Variables are kind of new I'll just add a link for those who haven't heard of it. — ArneHugo
– ArneHugo, Commented May 11, 2017 at 6:27

Graham · Accepted Answer · 2017-09-29 05:26:21Z

4

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/

edited Sep 29, 2017 at 5:26

Graham

7,86020 gold badges67 silver badges92 bronze badges

answered May 11, 2017 at 6:20

Sebastian Brosch

43.8k15 gold badges78 silver badges89 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Lloyd Dominic Over a year ago

My primary browser is Firefox, running the latest version, and I'm sure that all major browsers support that.

Lloyd Dominic Over a year ago

Hmmm ... I'm a little curious about what that "second value" in the var() was. Is it the fallback value if something error goes with the variable?

Sebastian Brosch Over a year ago

@LloydDominic - that's right! If the first parameter fails, the second parameter take effect. And you see in the example above no fallback is used, so the first parameter is successfully used.

Lloyd Dominic Over a year ago

But, can it take for multiple parameters for multiple fallbacks, or just two parameters?

Sebastian Brosch Over a year ago

You can do something like this: var(--theme-primary, var(--theme-secondary, white));

Collectives™ on Stack Overflow

Variable within an another variable

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related