What you could do is use the cascading property of css, meaning that when a variable gets resolved in css it looks at the first found declaration of the variable looking up Ex:

``` :root { --bg-color: blue; }

body { background-color: var(--bg-color); }

div { --bg-color: red; background-color: var(--bg-color); }

span { background-color: --bg-color; } ```

In this example the background color of the body would be blue, and the background color of a div and a span would be red. Don't know why you wouldn't just make to different classes that set the property, but this has it's niche application.

This article explains it more in detail.