#CssVariable

Ana Tudor 🐯anatudor
2024-08-17

gotcha: if you set a list of gradient stops on an element:
.a { --l: var(--c0), var(--c1) }

... and expect to be able to get *a different gradient* if you just modify --c0 & --c1 on its .b children... I have bad news.😾

You need to set:
.a, .b { --l: var(--c0), var(--c1) }

Live demo on @codepen
codepen.io/thebabydino/pen/rNE

Particularly annoying when that gradient is used on tens of various children. 😿

Screenshot of the demo illustrating the problem: --c0 and --c1 are modified on the child divs, but the gradient still uses their values from the parent.
Ana Tudor 🐯anatudor
2024-08-14

What if you need to set `color` to the inverted value of a CSS variable? You can't invert the whole element because the rest of it shouldn't be inverted. And you can't use the Sass `invert()` on a CSS var.

Here's how! πŸ‘‡

(see developer.mozilla.org/en-US/do for more details)

rgb(from var(--c) calc(255 - r) calc(255 - g) calc(255 - b))
Ana Tudor 🐯anatudor
2024-07-30

1⃣1⃣ Pure CSS 1 div animated 🌈 ∞ logo
codepen.io/thebabydino/pen/zRZ

Also has a video of me live coding it.

Inautiloinautilo
2024-03-11


Add superpowers to your CSS variables Β· β€œWe’re on the verge of yet another CSS revolution.” ilo.im/15y7gy

_____

Inautiloinautilo
2023-12-27


CSS-based state management Β· The power and versatility of CSS custom properties ilo.im/15xiam

_____

Client Info

Server: https://mastodon.social
Version: 2025.04
Repository: https://github.com/cyevgeniy/lmst