Can I assign a CSS variable to another?

Question

Can I assign one globally defined CSS variable to another locally define variable?

For example, the variable --dark has been globally defined as black.

Then, I want to be able to do:

:root {
    --background-color: --dark
}

.light {
    --background-color: white
}

div {
   background-color: --background-color
}

So that by default, my div will have a black background. And when the class light is added to it, it will have a white background.

I need the 'default' --dark variable here because it is a theme variable.

doğukan · Accepted Answer · 2019-04-09 19:03:47Z

56

You should assign as var(--dark)

:root {
    --dark : black;
    --background-color: var(--dark);
}

.light {
    --background-color: white;
}

div {
  height: 100px;
  width: 100px;
  background-color: var(--background-color);
}

<div class="light"></div>
<div></div>

answered Apr 9, 2019 at 19:03

doğukan

28k15 gold badges67 silver badges79 bronze badges

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

1 Comment

7ahid Over a year ago

And for Ionic, instead of :root, use :host. Thats where I was going wrong!

Collectives™ on Stack Overflow

Can I assign a CSS variable to another?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related