CSS constants

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

Example:

@const THEME_DARK_COLOR: #FAA
#sidebar
{
 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);

Where:

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

Example:

@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;
 font: @THEME-DEFAULT-FONT;
}

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.