Escaping values

Less is an extension of CSS. This means that Less gives an error when it comes across invalid CSS or evaluates a valid CSS during compilation. Some browsers define properties with an invalid CSS. Well-known examples will include something such as property: ms:somefunction(). Some of these rules can be replaced by vendor-specific rules. It is important to note that invalid property values won't get compiled in Less.

A new function, calc(), in CSS3 is a native CSS way of doing simple math as a replacement for a value of any length.

In both cases, Less won't give us the right value when we compile or import.

@aside-width: 80px;
.content {
width: calc(100% -  @aside-width)
}

The preceding code gets compiled into the following code:

.content {
  width: calc(20%);
}

From the preceding code, @aside-width: 80px; is the declaration of a variable with the name aside-width. This variable gets a value of 80 pixels. More information on variables will be covered in the following sections. However...