Custom Units At Rule - tomhodgins/process-css-demo GitHub Wiki

A custom at-rule that allows CSS authors to define ahead-of-time optimized CSS units in their stylesheets.

Authors can use a @--custom-units at-rule with a declaration list of custom properties inside, each with a single dimension as their value. Then CSS authors may use the name of the custom unit as the unit part of a dimension token, and the units will be transformed during output to multiples of the dimension declared in the @--custom-units rule:

@--custom-units { <declaration-list> }

• <declaration-list> is a list of custom properties (starting with --) with a single dimension value

This would define a custom unit named --example to be 2 inches big:

@--custom-units {
  --example: 2in;
}

If, later in the same stylesheet we had used it in a value like this:

.demo {
  width: 3--example;
}

The resulting output would be:

.demo {
  width: 6in;
}

• Check out the token in the CSS syntax spec.