03

12

LESS: tratamiento del color

Este es el último artículo de la guía sobre LESS, donde hablaré de las funciones propias de este lenguaje para tratar el color, que nos permite cambiar aspectos básicos fácilmente como el brillo, saturación, tonalidad de color e incluso nos permite mezclar los colores.
En este ejemplo partimos de los tres primeros colores, sin alterar, y posteriormente usamos la función de tratamiento de colore que está escrita (la variable @color con tendría o se sustituiría por el color base, y si no sabéis como van las variables podéis echarle un ojo).

La mayor utilidad que tienen estas funciones es poder cambiar parámetros del color con exactitud de forma fácil.
La primera función aumenta el brillo del color, la segunda le quita saturación y la tercera cambia la tonalidad del color (estas son unas de las funciones que ahora os mostraré).

Tratamiento del color

Brillo

Para el brillo tenemos dos funciones, la que aclara el color y la que lo oscurece, en ambas establecemos el porcentaje que aplicará.

1. @color: #1193AA;
2. .elemento-1{background: ligthen(@color, 20%);} /* 20% más claro */
3. .elemento-2{background: @color;}
4. .elemento-3{background: darken(@color, 20%);} /* 20% más oscuro */

Saturación

De igual forma que con el brillo tenemos dos funciones, la primera para aumentar la saturación y la segunda para disminuirla, aplicando el porcentaje de aumento o diminución.

1. @color: #1193AA;
2. .elemento-1{background: saturate(@color, 50%);} /* 50% más de saturación */
3. .elemento-2{background: @color;}
4. .elemento-3{background: desaturate(@color, 50%);} /* 50% menos de saturación */

Transparencia

Con esta función podremos manipular fácilmente el canal alpha del color (grado de transparencia) con tres funciones distintas, una que aumenta y otra que disminuye la transparencia y por último otra función llamada fade que nos deja el color al 50% de transparencia, (en el ejemplo usaré un color RGBA con 50% de transparencia como el que nos devolvería fade).

1. @color: rgba(17,147,170,0.5);
2. .elemento-1{background: fadein(@color, 30%);} /* 20% más de opacidad (total 80%) */
3. .elemento-2{background: @color;}
4. .elemento-3{background: fadeout(@color, 30%);} /* 20% menos de opacidad (total 20%) */

Tono

Con esta función podemos cambiar el tono del color (el tono es el propio color independientemente del brillo y la saturación) y tenemos una función donde le establecemos un número entero positivo o negativo.

1. @color: #1193AA;
2. .elemento-1{background: spin(@color, 30);} /* 30 grados más de tono */
3. .elemento-2{background: @color;}
4. .elemento-3{background: spin(@color, -30);} /* 20 grados menos de tono */

Mezclar colores

Para finalizar, también tenemos una función que se encarga de mesclar dos colores, tenemos que establecer los colores y el porcentaje de mezcla.

1. @color-1: #F37735;
2. @color-2: #EC098C;
3. .elemento-2{background: @color-1;}
4. .elemento-1{background: mix(@color-1, @color-2, 50%);} /* 50% de mezcla */
5. .elemento-3{background: @color-2;}

Resumen

Esta ha sido la guía de LESS, que como habéis podido ver puede ser muy útil, yo personalmente lo he empezado a usar y me ahorro muchísimo tiempo al crear las hojas de estilos.