Assuming you have a component which has a default transform property value(s) and can also have additional ones, which are optional, then logically it should be written as so:
.component {
|-- default ---| |-- optional --|
transform: translate(100px) var(--transform);
}
But...It does not work as intended if the --transform variable is not defined.
I am unsure why, but it can be easily fixed using this trick:
.component {
transform: translate(100px) var(--transform, );
}
Did you notice? There is a fallback defined to nothing: (, )
W3 Spec:
In an exception to the usual comma elision rules, which require commas to be omitted when they’re not separating values, a bare comma, with nothing following it, must be treated as valid in var(), indicating an empty fallback value.
Top comments (3)
you can see the why in (7) : dev.to/afif/what-no-one-told-you-a... :)
Ha, I know that a variable can be empty, but I didn't view it as a related thing to this scenario because here the fallback is empty and not the variable itself, but I guess both cases root from the same origin
Yes, both accept a "declaration value" (w3.org/TR/css-variables-1/#using-v...) so they follow the same rule defined here: w3.org/TR/css-syntax-3/#typedef-de...