Custom Properties & The var() Fallback & @property

Custom Properties & var(), going deeper

Level up your variables: fallbacks, inheritance, and typed values.

Fallback values

var(--name, fallback) kicks in when --name is missing:

p {
  color: var(--text, #222);
}

Using inside other functions

calc(var(--gutter) * 2), in gradients, in clamp()...

set on read-only inherited values

Custom properties inherit. Set near the top, override later.

@property: typed custom properties

Modern way to give variables a type (syntax, initial value, inherits):

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

This lets you animate --angle smoothly (transitions + custom props!).

The big picture

Custom props = flexibility, theme engines, and now with @property, typed values you can even animate.

TL;DR

• Fallback: var(--x, default).
• Variables inherit via subtree.
• Follow chain: define → use → override.
• @property adds types (angle, color...).
• Types make transitions/animations work.