CSS constants

Constants allow to declare value once and use it by name in other places.



  background-color: @THEME_DARK_COLOR;

#content h1
  border-bottom: @THEME_DARK_COLOR 1px solid;

@const at-rule

Declaration of the const.

@const name: value(s);


  • name is a symbolic name (nmtoken?);
  • value(s) – single or sequence of values.


@const  THEME-BORDER-WIDTH:  1px 1px 1px 1px;
@const  THEME-BACKGROUND-COLOR:  orange;
@const  THEME-DEFAULT-FONT:  12pt arial, helvetica, sans-serif;

Constant insertion.

const insertion point may appear in attribute value production and is marked by ‘@’ symbol immediately followed by the name of the constant:

#something {
   border-width: @THEME-BORDER-WIDTH;
   left-border: @THEME-BORDER-WIDTH solid black;

Undefined constant insertion.

non-existent constants produce empty insertion. So

#something {
   left-border: @DOES_NOT_EXIST solid black;

will be transformed to

#something {
   left-border: solid black;

@const are constants.

values of @const are immutable in runtime – once parsed they cannot be changed. If there are multiple declarations of constant with the same name then only first is used.