Custom Properties & The var() Fallback & @property

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

Fallback values

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

css
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):

css
@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.