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...