Is it possible to reference a :root css variable within another :root variable?

Question

:root {
    --foo: #fff;
    --bar: --foo;
}

A use case would be - I allow a primary colour to be set and be re-used within other variables.

I cant seem to find any information on this and i'm starting to think its not possible.

Temani Afif · Accepted Answer · 2019-12-09 14:50:58Z

8

Simply like this

:root {
    --foo: #fff;
    --bar: var(--foo);
}

You can also have a more complex case:

:root {
    --foo: #fff;
    --bar:3px solid var(--foo); /* Define a border using the --foo color*/
}

But you should notice that such thing is useless in most of the cases because you are evaluating a variables inside :root using another one. If you change the main variable later, nothing will happen.

Related to get more details: CSS scoped custom property ignored when used to calculate variable in outer scope

edited Dec 9, 2019 at 14:50

answered Dec 9, 2019 at 14:46

Temani Afif

280k30 gold badges379 silver badges504 bronze badges

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

2 Comments

Temani Afif Over a year ago

@MikeHague you may check the update before accepting as I susoect you will be using this syntax for a particular purpose and you will get surprised when it won't work

Mike Hague Over a year ago

It's working as i wanted thanks! Im actually using a computed Vue function with these and the above works well and updates as i wanted. Thanks again

Collectives™ on Stack Overflow

Is it possible to reference a :root css variable within another :root variable?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related