Functions & Operations in {less}

Operations

Operations allow for your to modify values that are proportional to another value. This makes it easier to work with a color schemes. You can operate on any number, color or variable.

Proportional Values

These are values that are related to another value. For example, a darker version of color.

To use an operation, you will need to put the operation inside parentheses. This lets {less} know what to do with it, and keeps it compatible with CSS.

In the following example you can see how the color red is defined. As a variable it can be used, but then it can also be adjusted based upon an operation, in this case to desaturate the color.

In addition to the desaturate function, you can also add (+), subtract (-), multiply (*), and divide (/). These means you could add value to a thickness of a line, or size of a font.

@red:	#842210;
.class1 {
	color: @red;
	border-color: desaturate(@red, 30%);
}

Functions

{less} provides a variety of functions which transform colors, manipulate strings and do maths. They are documented fully in the function reference.

You can use functions to determine new values based upon other values. The process can be as simple or complicated as you need it to be.