LESS
| ,

Cuando estamos desarrollando una hoja de estilos, en ocasiones tenemos que repetir varias veces un mismo color o un mismo tamaño de letra, y muchos de los valores que establecemos como anchos o paddings son resultados de operaciones matemáticas que tenemos que hacer nosotros. Como CSS no es un lenguaje de programación, no está preparado para solucionar estos problemas. Pero en los últimos años han aparecido varios lenguajes preprocesadores de CSS, como LESS, Sass o Stylus, que añaden algunas ventajas de los lenguajes de programación al CSS. En este artículo veremos una introducción a uno de los más conocidos y utilizados: LESS.

LESS se creó como una extensión de CSS, para facilitar y agilizar el trabajo con hojas de estilo. Es un lenguaje que puede ser ejecutado tanto en el cliente como en el servidor, y que al compilar el código al final deja como resultado un CSS listo para que lo interprete el navegador.

LESS añade funcionalidades que no tenemos si desarrollamos puro CSS, como los mixins, las funciones de color o el anidamiento de reglas. Aquí veremos algunas, pero antes de decidiros por este lenguaje, recomendamos la lectura de esta comparativa entre LESS, Sass y Stylus: Sass vs. LESS vs. Stylus: Preprocessor Shootout.

Empezando una hoja de estilos con LESS

Un archivo LESS es un archivo de texto plano con la extensión .less. En él podemos incluir CSS normal:


#contenedor { width:960px; margin:0 auto }

O lanzarnos a probar las ventajas que ofrece LESS.

Anidamientos

Al desarrollar una hoja de estilos, generalmente vamos siguiendo un orden según la jerarquía de elementos. El código de nuestro CSS suele reflejar la jerarquía así:


article {
    width:60%;
    padding:3%;
}
article p {
    margin:10px 0;
}
article p strong {
    font-weight:bold;
    color:#34fa06;
}
article p strong.resaltado {
    font-size:1.2em;
    color:#996532;
}

Con LESS podemos establecer las jerarquías anidando los elementos. Si introducimos un selector dentro del grupo de declaraciones de otro, estaremos indicando que es descendiente de aquél.


article {
    width:60%;
    padding:3%;
    p {                             /* Equivale a: article p */
        margin:10px 0;
        strong {                    /* Equivale a: article p strong */
            font-weight:bold;
            color:#34fa06;        
            &.resaltado {           /* Equivale a: article p strong.resaltado */
                font-size:1.2em;
                color:#996532;
            }
        }
    }
}

Aquí vemos también cómo usar el operador & para añadir elementos a un selector mediante la concatenación.


a {
    text-decoration:none;
    &:hover {
        text-decoration:underline;
    }
}

Variables

En LESS podemos establecer variables y asignarles un valor, que puede ser una cadena de texto, un valor numérico, un color… Después podemos utilizar la variable en cualquier lugar de la hoja de estilos. La ventaja de esto es que los valores que estén asignados a variables sólo están escritos en un sitio, y luego es muy rápido cambiarlos.

Las variables se inicializan así:


@color_principal: #ff0000;
@ancho_contenedor: 960px;

Y luego pueden ser usadas en el resto de la hoja:


p {
    font-size:1.2em;
    color:@color_principal;
}
#contenedor {
    width:@ancho_contenedor;
    margin:0 auto;
}

Incluso pueden ser utilizadas en cálculos matemáticos:


#cabecera {
    width:@ancho_contenedor + 20px;
}

Mixins

Con los mixins podemos agrupar varias propiedades y asignarles un identificador. Después podemos utilizar el grupo en cualquier sitio de la hoja de estilos, utilizando su identificador:


.sombreado {
    -moz-box-shadow:1px 1px 2px #000;
    -webkit-box-shadow:1px 1px 2px #000;
    box-shadow:1px 1px 2px #000;
    background-color:#666;
}

Aquí hemos agrupado una propiedad para la sombra, con todas las versiones con prefijo, más un color de fondo, y le hemos asignado el identificador .sombreado. Ahora podemos incluir el grupo de propiedades dentro de las declaraciones de cualquier selector:


.aviso {
    color:#f00;
    font-weight:bold;
    .sombreado;
}

Los mixins también admiten parámetros, de modo que pueden ser utilizados como una función:


.sombreado (@x:0, @y:0, @blur:1px, @color_sombra:#000, @color_fondo:#666) {
    -moz-box-shadow:@x @y @blur @color_sombra;
    -webkit-box-shadow:@x @y @blur @color_sombra;
    box-shadow:@x @y @blur @color_sombra;
    background-color:@color_fondo;
}

Como vemos, se pueden establecer valores por defecto para los parámetros. Este mixin se podría invocar así:


.aviso {
    color:#f00;
    font-weight:bold;
    .sombreado(2px, 4px);
}

Le hemos pasado dos valores para los dos primeros parámetros (desplazamiento x e y), y usará los valores por defecto para los otros tres, de modo que el CSS resultante que leerá el navegador será éste:


.aviso {
    color:#f00;
    font-weight:bold;
    -moz-box-shadow:2px 4px 1px #000;
    -webkit-box-shadow:2px 4px 1px #000;
    box-shadow:2px 4px 1px #000;
    background-color:#666;
}

En ocasiones podemos usar la variable @arguments, que contiene todos los parámetros pasados a la función:


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

Operaciones

Como hemos visto antes, LESS permite realizar operaciones con valores. Un ejemplo donde esto nos puede ser útil es cuando tenemos un elemento con paddings al que le queremos establecer un ancho. Al trabajar con el box model, tendremos que restarle los paddings al ancho que queremos ver en pantalla, con la desventaja de que si en algún momento cambiamos los paddings, tenemos que acordarnos de recalcular el ancho. Con LESS podemos ahorrarnos todo esto:


@ancho_contenedor: 960px;
@paddings_contenedor:20px;

#contenedor {
    width:@ancho_contenedor - (@paddings_contenedor * 2);
}

Si luego queremos cambiar los paddings, sólo hay que modificar la variable @paddings_contenedor.

Conclusiones

Si queremos reducir el tiempo de desarrollo cuando elaboramos nuestras hojas de estilo, es muy recomendable utilizar preprocesadores de CSS. Aquí hemos visto algunas de las funcionalidades de LESS, pero no es el único ni tiene por qué ser el mejor (cada uno tiene sus ventajas). Para profundizar en el uso de este lenguaje, su web tiene una documentación detallada: Documentación LESS.

Actualización 07-05-2017: Hoy se pueden utilizar ya variables nativas en CSS.

¿Qué opinas?

Tu dirección de correo electrónico no será publicada. * Campos obligatorios