-
Notifications
You must be signed in to change notification settings - Fork 6
Description
Maybe this comes down to the interpretation of what is a valid value for custom properties, but from what I can tell, CSS Vars can store any kind of value - not just complete, valid CSS values.
So here's my use case. I have an RGB value that I store in a custom property, to be referenced inside an RGBA rule:
:root { --navyblue-rgba: 46, 44, 48; }
h1 { background: rgba(var(--navyblue-rgba), 0.94); }
This way I can adjust opacity as I please and I don't have to create ~4 other unique variables for the different opacity values I use throughout the site. And it's malleable for further customization with JS. The browsers interpret this absolutely as I intended.
When I process the file with crass, it keeps the declaration in :root but removes all the rules which reference it. For example, the h1 no longer has a background rule at all, only its other rules.
(crass will keep references to custom properties that contain full, valid-looking values)