-
This is a great LeaVerou trick using var() white-space &
initialvalues to create basic if/then toggles & mixins: lea.verou.me/2020/10/the-var-space-hack-to-toggle-multiple-values-with-one-custom-property/ Another var() mixin trick I like, using selectors: [style*='--arg`] { --set: any; properties: & values; not: just var(--arg); } -
Here's one that selects on any of the --card-* args: [style*='--card'] { background-color: var(--card-bg, white); border: thin solid var(--card-border, gray); grid-column: var(--card-size, small); padding: 1em; } More about it in this article: smashingmagazine.com/2019/07/css-custom-properties-cascade/