Trabajar con colores en LESS

por

LESS actúa como herramienta para crear CSS con variables, operaciones, reglas anidadas o funciones, por citar algunos ejemplos.

Preprocesadores LESS

Hace unas semanas tuve la oportunidad de recibir un curso en EscuelaIT sobre cómo utilizar prepocesadores y utilizarlos en tu proyecto. ¿Sabías que podemos utilizar CSS como lenguaje dinámico gracias a LESS?

En este post, haré una breve introducción de cómo funciona este preprocesador y os daré algunos ejemplos de lo que podemos hacer con LESS.

Antes de nada, te diré que en la página oficial de LESS, podrás encontrar toda la documentación necesaria para poder trabajar con esta herramienta. Desde su instalación, uso y funciones permitidas para poder sacarle todo el partido posible.

Esta herramienta va ayudarte sin duda en la fluidez de tus proyectos. Teniendo conocimientos previos de CSS estoy segura de que su funcionamiento va a ser de lo más lógico para ti.

¿Cómo funciona LESS?

Para trabajar con LESS, necesitarás un programa que lo convierta a CSS, un pre-compilador. Entre tantos, te dejo un listado de algunos de ellos:

  • SimpLESS
  • Livereload
  • Codekit – Muy completo. Es de pago pero con un periodo de prueba gratis. Solo para Mac.
  • Crunch! – Para todos los sistemas operativos.
  • Mixture – Se volverá de pago.

Aunque también podrás hacerlo como se explica en la página oficial (trabajando desde el lado del cliente, con node.js o PHP o del servidor, con javascript), te recomiendo que te descargues alguno de los preprocesadores que te ofrezco y con los que no tendrás ningún problema en usar.

Y ahora bien, ¿qué significa todo esto? Vayamos por partes para entenderlo bien. En este post, que es una iniciación a LESS  veremos como trabajar con colores de una manera básica para entender el funcionamiento.

Colores

Si tenemos un color principal (o corporativo) en nuestra página, cada vez que queramos incluirlo en un estilo de nuestro CSS debemos escribirlo como por ejemplo:

.colorBase {
  background: rgb(227,227,227);
}

h1 {
  color: #3e3e3e;
  float: left;
  font-size: 105px;
}

En este sencillo código, utilizamos el mismo color #3e3e3e para diferentes propiedades, background y color. Sin embargo, cada vez que necesitamos usar ese color, debemos escribirlo si queremos que aparezca.

LESS nos ayuda a simplificar el código de la siguiente manera. En primer lugar creamos una variable con este color. Crear una variable es sencillamente darle un nombre.

@colorPrincipal: rgb(227,227,227);

.colorBase {
  background: @colorPrincipal;
}

h1 {
  color: @colorPrincipal;
  float: left;
  font-size: 105px;
}

¿Ves qué facil? Así, si mañana el color principal cambia a negro, tan solo tendremos que cambiarlo  una sola vez: en la variable.

Ahora vamos a complicarlo un poco más. Supongamos que queremos tener un color secundario, que es el opuesto en el círculo cromático al primario (significa que se encuentra a 180º del color Primario dentro del círculo cromático).
Esto es muy sencillo hacerlo con LESS, ya que tiene su propio lenguaje. Para asignar el opuesto deberíamos escribir lo siguiente:

@colorPrincipal: rgb(227,227,227);
@colorSecundario: spin(@colorPrincipal, 180);

El @colorSecundario recibirá como color el opuesto al primario. Esto lo hemos declarado con la función «spin» (girar en español) y le hemos dicho que gire (spin) 180º el @colorPrincipal. Ahora sí va quedando claro, ¿no? 🙂

Bien, veamos otras funciones aplicables a los colores. Necesitamos un tono del @colorPrinicipal más claro, y otro más oscuro. ¿Cómo lo conseguimos sin necesidad de andar buscando el adecuado en una paleta de colores? Veamos.

@colorPrincipal: rgb(227,227,227);
@colorSecundario: spin(@colorPrincipal, 180);

@sombra: darken(@colorPrincipal, 10%);
@luz: lighten(@colorPrincipal, 30%);

Esto significa lo siguiente. Con la función darken le damos oscuridad a un color y con lighten, luminosidad. El porcentaje actúa como tal para añadir más luz y oscuridad al mismo color.

Con esta misma metodología podemos aplicar otras funciones a los colores, por ejemplo para saturar o desaturar un color.

@colorPrincipal: rgb(227,227,227);
@colorSecundario: spin(@colorPrincipal, 180);

@sombra: darken(@colorPrincipal, 10%);
@luz: lighten(@colorPrincipal, 30%);

@colorPrincSaturado: saturate(@colorPrincipal, 30%);
@colorPrincDesat: desaturate(@colorPrincipal, 40%);

De la misma manera podemos trabajar con otras funciones para colores, tales como:

  • fadein – Devuelve al color el porcentaje que le apliquemos de «menos» transparencia.
  • fadeout – Devuelve al color el porcentaje que le apliquemos de «mas» transparencia.
  • fade – Devuelve al color el porcentaje que le apliquemos de transparencia.
  • mix – Crea una mezcla de colores. 
    mix( @color1 ,  @color2 , [ @weight : 50%]);
  • greyscale – Devuelve el color totalmente saturado. 
    greyscale( @color );

Esto es solo el comienzo de todo lo que LESS puede ayudarnos a agilizar nuestros proyectos. Si te ha gustado espero que estés atento porque próximamente seguiremos viendo más capítulos de este post.

¡Gracias por leer y a seguir disfrutando! ^^

 

Algunos Enlaces de Interés para LESS | Qué es y cómo funciona