LESS CSS Functions examples and tutorials

This tutorial covers popular functions of an LESS CSS framework

LESS CSS Functions

function	Description
lighten	Lighten version of an given color
darken	Dark color of an given color
mix	Mix the colors of two into single color
spin	used to rotates the hue color
saturate	saturate the given color
desaturate	desaturate the given color
lightness	lightness of an given color
saturation	saturation of an given color
percentage	Convert given decimal to percentage value
round	Rounding on given number
ceil	ceil on given number
floor	floor on given number
min	minimum on given list of numbers
max	maximum on given list of numbers
rgb	Create rgb colors for an given number
rgba	Create rgba colors for an given number

@main-color: green;
background-color: lighten(@main-color, 10%);
border-color: darken(@main-color, 10%);

Output CSS

background-color: #5faee3;
border-color: #217dbb;