Tutorial de LESS: El uso de variables

Siguiendo con el tutorial de LESS desde cero, en esta ocasión os enseñaré cómo se utilizan variables en LESS y, lo más importante, la sintaxis utilizada.

Pero antes, recordemos el guión para quien haya llegado por primera vez a esta entrada sin leer las anteriores:

Plan de vuelo

1. Introducción.
2. El uso de variables.
3. Los Mixins.
4. Reglas necesarias.
5. Funciones.
6. Divide y vencerás.

Entonces vamos a explicar qué son y qué ventajas tiene el uso de variables en LESS.

La sintaxis de LESS

Tranquilo, la sintaxis de LESS no es complicada; es casi idéntica a la de CSS. Además, los creadores de LESS han hecho que éste sea 100% compatible con CSS, por lo que puedes escribir CSS normal en tus archivos .less.

Simplemente recuerda que los ficheros LESS tienen la extensión .less y no .css.

Variables

Aunque el objetivo de esta entrada era puramente explicar el uso de variables en LESS, tenía que explicar antes la (nada complicada) sintaxis.

Una vez hecho esto, podemos sumergirnos en el mundo de las variables de LESS.

Para declarar una variable en LESS basta con incluir un @ previo al nombre de la variable en sí. Tras ese @ puede ir una combinación de caracteres alfanuméricos puntos y guiones bajos.

Una vez que le hemos asignado un nombre a nuestra variable, colocamos dos puntos tal y como hacemos con una propiedad CSS y, acto seguido, incluimos el valor que tomará la variable; por ejemplo un código de color en hexadecimal o una medida en píxeles.

Vamos a ver algunos ejemplos:

@blue: #00214D;
@red: #CF142B;
@white: #FFF;
@black: #000;
@baseFontSize: 15px;
@baseLineHeight: 22px;

Sencillo, ¿verdad? Ahora puedes utilizar estas variables en cualquier etiqueta de tu archivo LESS simplemente haciendo la llamada a la variable.

Por ejemplo, vamos a asignar el color que contiene la variable «blue» a todos los encabezados h1.

h1{
   color: @blue;
}

Y, a continuación, vamos a asignarle el color «red» y el «baseFontSize» a todos los párrafos:

p {
   color: @red;
   font-size: @baseFontSize;
}

En estos ejemplos puede no parecer demasiado complicado y/o útil, pero tienes que creerme cuando te digo que es lo más útil que tiene LESS.

Imagina que todos tus párrafos, enlaces, encabezados h4, strongs y ems llevan el mismo tamaño de fuente, ¿Cómo lo harías?

Está claro que sin LESS tendríamos que colocar la propiedad «font-size: 15px;» en todas y cada una de las etiquetas antes mencionadas, pero con LESS podemos colocar «font-size: @baseFontSize;» de tal manera que cuando queramos cambiar el tamaño general de los textos de nuestra web, sólo cambiaremos el valor asignado a dicha variable y no todas las etiquetas «font-size». ¿Te va pareciendo más útil? :-D

Para que te hagas una idea, el siguiente ejemplo de LESS (creado con las variables de arriba):

h1 {
    color: @red;
}
 
h2 {
    color: @blue;
}
 
h3 {
    color: @black;
}
 
p {
    color: @black;
    font-size: @baseFontSize;
    line-height: @baseLineHeight;
}

Compila de la siguiente manera:

h1 {
    color: #CF142B;
}
 
h2 {
    color: #00214D;
}
 
h3 {
    color: #000;
}
 
p {
    color: #000;
    font-size: 15px;
    line-height: 22px;
}

Lo dicho, bastante sencillo. Pero no vamos a quedarnos aquí.

Utilizando textos en las variables

Como puedes deducir del título de esta parte de la entrada, las variables no tiene por qué ser solamente de colores o tamaños de fuente. También podemos definir variables con textos (cadenas de caracteres), tal y como se hace en javascript o php.

Esto se utiliza mucho cuando utilizas Icon Fonts en tu diseño web, pero eso es asunto de otra entrada.

En resumidas cuentas, podemos asignar textos a las variables así como códigos hexadecimales o tamaños de fuente:

@description: "Me gusta LESS.";

Y, al igual que los ejemplos anteriores su uso:

a:before: @description;

La importancia de las variables

Aunque he insistido desde la primera frase de esta entrada en lo importantes que son las variables en LESS, creo que ahora ya puedes decir conmigo que, efectivamente, lo son.

Tal y como dije en la introducción, puedes descargar una de las aplicaciones que te mencionaba para compilar LESS y empezar a probar el uso de variables. Más que nada porque en la siguiente lección aprenderemos el uso de mixins, otro de los pilares fundamentales de LESS.

Derechos de imagen

Si te ha gustado esta entrada no dudes en darnos ánimos y comentar qué te parece en los comentarios.