7 Uses for CSS Custom Properties

I find all seven of these quite clever and useful.

I particularly like using custom properties when you can sneak a variation into a place where you’d normally have to re-declare a whole big chunk of code.

.some-element {
  background-color: hsla(
    var(--h, 120),
    var(--s, 50),
    var(--l, 50),
    var(--a, 1)
  );
}

.some-element.darker {
  --l: 20;
}

Nice.

Direct Link →