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.

Answer 1

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