Es un lenguaje que compila a CSS.

• Página oficial
• Wiki

<link rel="stylesheet/less" type="text/css" href="styles.less">
<script type="text/javascript" src="less-1.1.3.js"></script></link>

Compilar:

$ lessc styles.less styles.css

Compilar en modo minified:

$ lessc styles.less styles.css -x

Se declaran con @nombre:valor;:

@color: #a8b317;
a {
    color: @color;
}
h2 {
    color: @color;
}

Compila a:

a {
    color: #a8b317;
}
h2 {
    color: #a8b317;
}

Podemos operar sobre ellas:

@minWidth: 20%;
@columnLeft: @minWidth * 2;
@columnRight: @columnLeft + @minWidth;
@color: #4a785b;
.sideLeft {
    background-color: @color + #111;
    width: @columnLeft;
}
.sideRight {
    background-color: @color;
    width: @columnRight;
}

Compilaría a:

.sideLeft {
    background-color: #5b896c;
    width: 40%;
}
.sideRight {
    background-color: #4a785b;
    width: 60%;
}

Consiste en agregar las propiedades de una clase a otra. Además podemos incluir parámetros (en el siguiente ejemplo

.round-corners (@radius: 5px) {
    -moz-border-radius: @radius;
    -webkit-border-radius: @radius;
    border-radius: @radius;
}

Que podría ser escrito como:

#header {
    .round-corners;
}
#post {
    .round-corners(16px);
}

Y compilaría:

#header {
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}
#post {
    border-radius: 16px;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
}

@arguments engloba todos los parámetros:

.shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
    -moz-box-shadow: @arguments;
    -webkit-box-shadow: @arguments;
    box-shadow: @arguments;
}
.shadow(1px, 2px);

Podemos generar reglas cuando las tenemos anidadas del estilo…

#record {
    h1 {
        font-family: Helvetica, Arial, sans-serif;
        font-weight: bold;
        font-size: 2em;
    }
    p {
        font-size: 12px;
        a {
            text-decoration: none;
            &:hover {
                color: red;
            }
        }
    }
}

Compilaría:

#record  h1{
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 2em;
}
#record p {
    font-size: 12px;
}
#record p a {
    text-decoration: none;
}
#record p a:hover {
    color: red;
}

lighten(@color, 10%); // devuelve un color un 10% mas "claro" que @color
darken(@color, 10%); // devuelve un color un 10% mas "oscuro" que @color
saturate(@color, 10%); // devuelve un color un 10% "más" saturado que @color
desaturate(@color, 10%); // devuelve un color un 10% "menos" saturado que @color
fadein(@color, 10%); // devuelve un color un 10% "menos" transparente que @color
fadeout(@color, 10%); // devuelve un color un 10% "más" transparente que @color
spin(@color, 10); // devuelve un color con 10 grados de tono mayor que @color
spin(@color, -10); // devuelve un color con 10 grados de tono menor que @color
hue(@color); // devuelve el canal `hue` de @color
saturation(@color); // devuelve el canal `saturation` de @color
lightness(@color); // devuelve el canal `lightness` de @color