Andrew Bone's solution will work, but I can't really recommend it.
CSS "variables" are really CSS custom properties, and I wish the terminology around them weren't so misleading because it leads folks into the exact dilemma you're running into right now. You can't and shouldn't use CSS custom properties like you would use variables in SCSS or Less -- but because they're "variables" folks try anyway.
CSS custom properties are intended to set meta-properties for larger components. For example:
This gets super important once you start working with web components and Shadow DOM -- custom properties turn out to be the only real way for web components to expose styling hooks to the page that's using them. In that context, the way that custom properties use the cascade, and the way that they're limited, is actually super appropriate!
But if you're looking for a full-fledged variable system, a preprocessor is still your best bet.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Andrew Bone's solution will work, but I can't really recommend it.
CSS "variables" are really CSS custom properties, and I wish the terminology around them weren't so misleading because it leads folks into the exact dilemma you're running into right now. You can't and shouldn't use CSS custom properties like you would use variables in SCSS or Less -- but because they're "variables" folks try anyway.
CSS custom properties are intended to set meta-properties for larger components. For example:
This gets super important once you start working with web components and Shadow DOM -- custom properties turn out to be the only real way for web components to expose styling hooks to the page that's using them. In that context, the way that custom properties use the cascade, and the way that they're limited, is actually super appropriate!
But if you're looking for a full-fledged variable system, a preprocessor is still your best bet.