Manipular colores usando LESS

Una de las caracteristicas más interesantes que encontré en Less CSS, al menos como diseñador gráfico, son las funciones de colores. Son funciones muy simples que permiten la manipulación de un color directamente desde la hoja de estilos.

Manipular colores desde la hoja de estilo facilita mucho el trabajo en web, porque por ejemplo nos permite hacer un gradiente de un mismo color claro a una tonalidad más oscura, invertirlo, desaturarlo, etc.

Cómo usar las funciones de color

Utilizar las funciones de color es bastante sencillo, únicamente debemos aprendernos el nombre de la función, poner el código o variable de color e indicar en qué porcentaje queremos manipularlo.

Por ejemplo para saturar o desaturar un color hacemos algo como lo siguiente:

@azul:     #33d;
@cyan:     #f0f;

.btn.azul{
    color:#fff;
    background:@azul;
    &:hover{
        background:saturate(@azul, 30%);
    }
}
.btn.cyan{
    color:#fff;
    background:@cyan;
    &:hover{
        background:desaturate(@cyan, 50%);
    }
}

 

En el ejemplo anterior tenemos dos botones, uno azul y otro cýan, que al posicionar el puntero encima cambia a un color más saturado en el caso del azul o a un color desaturado en el caso del cyan.

De igual forma podemos usar fadein y fadeout para manipular la transparencia de un color, en este caso usaremos dos botones, uno magenta y otro cyan (que inicia con 50% de transparencia):

@magenta:     #f0f;
@negro:       #000;

.btn.magenta{
    color:#fff;
    background:fadeout(@magenta, 50%);
    &:hover{
        background:fadein(@magenta, 30%);
    }
}
.btn.negro{
    color:#fff;
    background:@negro;
    &:hover{
        background:fadeout(@negro, 50%);
    }
}

 

De igual forma podemos trabajar con otras funciones de color como:

• lighten
• darken
• saturate
• desaturate
• fadein
• fadeout
• fade
• spin
• spin
• mix

Puedes ver en funcionamiento algunas de estas funciones en el ejemplo que he publicado en Github: uptoeleven-lesscss.

 

Más información

Enlace: Documentación oficial | http://lesscss.org/#-color-functions