2
: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
  • 245,468
  • 26
  • 309
  • 415
Mike Hague
  • 223
  • 1
  • 3
  • 15

1 Answers1

6

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

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • @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 – Temani Afif Dec 09 '19 at 14:56
  • 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 – Mike Hague Dec 09 '19 at 15:14