CSS·Advanced·Coding·1 min read
Can a custom property hold something other than a plain color or length, like a whole gradient or a comma-separated list?
Short interview answer
Yes — a custom property can hold almost any token sequence, since it isn't type-checked until it's substituted into a property that expects a specific value type. This is powerful, but means an invalid substitution only fails where var() is actually used, not where the custom property was declared.
Example
:root { --stripe: repeating-linear-gradient(45deg, #0001 0 10px, #0000 10px 20px); }.bg { background-image: var(--stripe); }Key takeaway
Explain the underlying mental model clearly, then support it with a concrete example and its trade-offs.