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.