1
: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
  • 211,628
  • 17
  • 234
  • 311
Mike Hague
  • 203
  • 1
  • 3
  • 14

1 Answers1

5

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
  • 211,628
  • 17
  • 234
  • 311
  • @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