Less CSS: pre­se­n­ta­ción y tutorial

A cua­l­quie­ra que pretenda programar o diseñar páginas web modernas le son in­di­s­pe­n­sa­bles las CSS. El lenguaje de las hojas de estilo, que al igual que HTML es uno de los lenguajes clave de la World Wide Web, permite separar de forma limpia el contenido de una página web de su formato gráfico. Así, ca­ra­c­te­rí­s­ti­cas como la di­s­po­si­ción, los colores o la ti­po­gra­fía pueden mo­di­fi­car­se en cualquier momento sin tener que alterar para ello todo el código fuente. Cuanto más grande sea un proyecto web, más complejas e in­aba­r­ca­bles se vuelven sus hojas de estilo o st­y­le­sheets, es decir, los archivos que contienen las di­re­c­tri­ces de formato gráfico en código CSS, y, con ellas, el trabajo con el lenguaje in­fo­r­má­ti­co. Es aquí donde Less, pre­pro­ce­sa­dor de CSS, entra en acción.

Less (Leaner Style Sheets) es una am­plia­ción re­tro­co­m­pa­ti­ble del lenguaje CSS o, en otras palabras, un pre­pro­ce­sa­dor del lenguaje de hoja de estilo. Eso quiere decir que cualquier código CSS es au­to­má­ti­ca­me­n­te también un código Less válido (pero no al revés). El objetivo de Less es hacer más eficiente la escritura en código CSS. Para ello, este lenguaje influido por SASS ofrece di­fe­re­n­tes co­m­ple­me­n­tos a los comandos CSS tra­di­cio­na­les como, por ejemplo, variables y funciones, las cuales, entre otras cosas, facilitan el trabajo con las hojas de estilo y permiten pre­s­ci­n­dir de la engorrosa du­pli­ca­ción de códigos.

Cuando Alexis Sellier presentó el pre­pro­ce­sa­dor CSS en 2009, el co­m­pi­la­dor para la tra­du­c­ción de Less en CSS aún estaba escrito en el lenguaje Ruby, orientado a objetos. Ac­tua­l­me­n­te, la base del lenguaje de las hojas de estilo, así como del proceso de co­m­pi­la­ción, es Ja­va­S­cri­pt-Tool Less.js, lo cual le da a Less la ventaja de poder ser compilado tanto del lado del servidor como del cliente (en el navegador).

Tanto CSS como Less son co­n­si­de­ra­dos lenguajes de hoja de estilo. Se trata pues, en ambos casos, de lenguajes formales que de­te­r­mi­nan el aspecto de in­te­r­fa­ces o do­cu­me­n­tos. Para ello, las hojas de estilo con las di­re­c­tri­ces de formato tienen que estar referidas tan solo a los elementos HTML de una página web, siendo el navegador quien se encarga de ana­li­zar­los. La di­fe­re­n­cia esencial entre Less y CSS es que CSS es un lenguaje estático, mientras que Less es un lenguaje dinámico y, por lo tanto, cuenta con elementos dinámicos como variables, ope­ra­cio­nes, funciones, mixins o ani­da­mie­n­tos, que no se en­cue­n­tran en CSS.

De este modo, mientras que los comandos en CSS tienen que seguir un orden concreto, Less ofrece a los de­sa­rro­lla­do­res mucha más fle­xi­bi­li­dad: se pueden definir, por ejemplo, reglas pe­r­so­na­li­za­das para un tipo concreto de elementos que se apliquen a toda la hoja para, de este modo, no tener que realizar tediosas re­pe­ti­cio­nes de código. También la sintaxis es diferente en ambos lenguajes. La sintaxis de Less puede ser co­n­si­de­ra­da, bá­si­ca­me­n­te, como una me­ta­si­n­ta­xis de CSS, ya que los códigos CSS válidos también lo son en Less con la misma semántica.

Si has elegido Less para tu proyecto, tienes dos opciones: usar el navegador que quieras para compilar las Less st­y­le­sheets con ayuda de Less.js por el lado del cliente; o instalar la apli­ca­ción de Ja­va­S­cri­pt en la co­mpu­tado­ra de de­sa­rro­llo y tra­du­ci­r­lo allí con ayuda de Less.js y del sistema de tiempo en ejecución de Ja­va­S­cri­pt Node.js a través de la línea de comandos.

El uso de Less del lado del cliente es la forma más rápida y fácil para trabajar con el lenguaje de las hojas de estilo. Sin embargo, no se re­co­mie­n­da esta opción para el posterior entorno live, ya que la co­m­pi­la­ción adicional de Less a CSS causaría claras di­s­mi­nu­cio­nes de re­n­di­mie­n­to para los usuarios que ac­ce­die­sen. En na­ve­ga­do­res que tuviesen Ja­va­S­cri­pt des­ac­ti­va­do se in­va­li­da­rían por completo las di­re­c­tri­ces de formato.

Para compilar Less en el navegador, indica primero en el documento en cuestión que deseas usar Less st­y­le­sheets (hojas de estilo con la extensión .less). Para ello, integra la extensión mediante el atributo rel «st­y­le­sheet/less»:

Luego descarga la versión actual de Less.js, que puedes encontrar, por ejemplo, en el di­re­c­to­rio oficial GitHub del pre­pro­ce­sa­dor CSS. La he­rra­mie­n­ta Ja­va­S­cri­pt la integra entonces en la cabecera ( <head> ) del proyecto:

Less también se ejecuta rápida y fá­ci­l­me­n­te en la co­mpu­tado­ra de de­sa­rro­llo. En lo que al sistema operativo se refiere, se puede elegir: el pre­pro­ce­sa­dor CSS funciona en Windows, macOS y UNIX/Linux, siempre y cuando el sistema de tiempo en ejecución de Ja­va­S­cri­pt Node.js me­n­cio­na­do arriba esté instalado.

De­s­cá­r­ga­te la versión actual para tu sistema en la web de Node.js e instálala. Con npm, el gestor de paquetes del sistema de tiempo en ejecución de Ja­va­S­cri­pt, instala luego el lenguaje de hojas de estilo a través de la línea de comandos:

Las Less st­y­le­sheets creadas pueden co­m­pi­lar­se en cualquier momento mediante la línea de comandos. El archivo example.less puede co­n­ve­r­ti­r­se, como ejemplo, en un archivo CSS con el siguiente comando:

Si a menudo se trabaja con CSS, aprender a manejar Less merece siempre la pena. Less no solo ofrece la po­si­bi­li­dad de integrar elementos dinámicos en los códigos de la hoja de estilo, sino también la de ahorrar mucho tiempo y esfuerzo. Para ello, eso sí, hay que observar primero las pro­pie­da­des de esta am­plia­ción de CSS. Y es que, para poder redactar hojas de estilo en Less, hay que conocer las bases de su sintaxis. En este breve tutorial de Less te mostramos, con prácticos ejemplos de Less CSS, las ca­ra­c­te­rí­s­ti­cas más im­po­r­ta­n­tes, in­clu­ye­n­do la notación co­rre­s­po­n­die­n­te.

Uno de los puntos fuertes de Less es la po­si­bi­li­dad de crear variables, al igual que en otros lenguajes de pro­gra­ma­ción. Dichas variables pueden contener cualquier tipo de valores, aunque los más re­le­va­n­tes son los que se usan más a menudo en la hoja de estilo en cuestión. Así, se suelen utilizar variables para definir de forma ce­n­tra­li­za­da colores, ti­po­gra­fías, di­me­n­sio­nes (altura, anchura, pro­fu­n­di­dad), se­le­c­to­res o URL, así como sus va­ria­cio­nes (más claro, más oscuro, etc.). Los valores elegidos pueden usarse luego en cualquier punto de la hoja de estilo, de forma que los cambios globales solo tienen que in­tro­du­ci­r­se en una única línea del código.

En el siguiente fragmento de código, por ejemplo, se definen dos variables: una para el color de fondo (@ba­c­k­grou­nd-color) y otra para el color del texto (@text-color). Ambas contienen códigos he­xa­de­ci­ma­les:

El color de fondo, en este caso el blanco, se aplica tanto al texto en bloque (p) como a las listas sin numerar (ul). Como color de texto se ha escogido el negro, que se aplica al texto en bloque y a los elementos de las listas (li). Si se quiere modificar esta co­n­fi­gu­ra­ción de colores, y, por ejemplo, usar texto blanco sobre fondo negro en las listas y los párrafos, basta con in­te­r­ca­m­biar los valores de las dos variables. En una hoja de estilo CSS co­n­ve­n­cio­nal habría que cambiar los valores de todos los elementos de uno en uno. Tras la co­m­pi­la­ción a CSS, el código adquiere la siguiente forma:

Los mixins funcionan con un principio similar al de las variables. En este caso, en cambio, no se definen valores sueltos, sino clases enteras de manera ce­n­tra­li­za­da, in­clu­ye­n­do los valores que contienen, para luego poder tra­n­s­fe­ri­r­los a otras clases en la Less st­y­le­sheet. Además, los mixins también pueden funcionar como funciones y aceptar pa­rá­me­tros (también con valores por defecto). Un ejemplo de ello es este mixin para redondear las esquinas (.rounded-corners), que se aplica tanto a la cabecera (#header) como al pie de página (#footer). Mientras que para la cabecera se toma el valor pre­de­te­r­mi­na­do, el #footer aplica al mixin un valor propio (10px):

La CSS compilada a partir de estas líneas de código Less tiene la siguiente forma:

Para lograr herencias en CSS hay que teclear largos y costosos se­le­c­to­res. En Less, en cambio, se pueden anidar se­le­c­to­res unos dentro de otros, tantos como se quiera. Esto, por un lado, ahorra esfuerzo y, por otro, aporta más claridad a la es­tru­c­tu­ra de la st­y­le­sheet. También para esta función del pre­pro­ce­sa­dor CSS tenemos un ejemplo:

Los se­le­c­to­res p, a y :hover en este caso han sido enlazados en la Less st­y­le­sheet, lo cual facilita mucho su di­s­ti­n­ción en una hoja de estilo CSS. Esto se ve cla­ra­me­n­te en la CSS generada a partir de nuestro código de ejemplo:

También las ope­ra­cio­nes ari­t­mé­ti­cas de suma (+), resta (-), mu­l­ti­pli­ca­ción (*) y división (/) se pueden usar en las Less st­y­le­sheets aplicando el operador co­rre­s­po­n­die­n­te a cualquier valor numérico o de color. Así, con poco esfuerzo, se pueden es­ta­ble­cer re­la­cio­nes entre los valores de los di­fe­re­n­tes elementos, re­la­cio­nes que se mantienen aunque se mo­di­fi­quen los valores iniciales. En caso de que la operación dictada por el operador no se pueda realizar o no tenga sentido en ese caso, el operador será ignorado au­to­má­ti­ca­me­n­te: por ejemplo, si se tratase de sumar un valor en píxeles con uno en ce­n­tí­me­tros. El siguiente ejemplo muestra las distintas po­si­bi­li­da­des para operar en Less:

Las de­fi­ni­cio­nes de base para los bordes (1px) y el color de base (#111), que es un tono negro, también se aplican a la cabecera y al pie de página, de manera que los valores de base son mo­di­fi­ca­dos por tres ope­ra­do­res:

1. El color de base se mu­l­ti­pli­ca por 3 en la cabecera. El resultado es el valor he­xa­de­ci­mal #333, al que co­rre­s­po­n­de un tono gris oscuro.
2. El marco derecho de la cabecera contiene el operador de mu­l­ti­pli­ca­ción * 2, por lo que es el doble de ancho que el marco estándar (2px).
3. El color base del pie de página también es mo­di­fi­ca­do con un operador: el valor he­xa­de­ci­mal #003300 se suma al valor de base #111, de manera que el pie de página adquiere un tono verde oscuro (#114411).

En el código CSS compilado los re­su­l­ta­dos de las ope­ra­cio­nes también son so­r­pre­n­de­n­tes:

Less amplía CSS también con funciones que abren todo un abanico de po­si­bi­li­da­des. Por ejemplo, en una Less st­y­le­sheet se pueden diseñar, por un lado, complejas re­la­cio­nes lógicas con la función SI (IF function) o con una función booleana; o bien funciones no menos complejas para cálculos ma­te­má­ti­cos como el coseno, el seno o la tangente. También se pueden usar, por otro lado, funciones simples para definir el color rá­pi­da­me­n­te (rgb, rgba, hsv etc.) o funciones con ope­ra­do­res de color como el contraste (contrast), la sa­tu­ra­ción (saturate, desature) o la claridad (lighten, darken). Para aumentar o disminuir la sa­tu­ra­ción de un elemento, por ejemplo, tan solo se necesita un valor de color y la función saturate. Luego puedes indicar, en forma de po­r­ce­n­ta­je (0–100%), cuánto quieres modificar la sa­tu­ra­ción:

En este ejemplo, el tono rojo oscuro se define con el código he­xa­de­ci­mal #842210 en la hoja de estilo y está indicado como color para la cabecera y el pie de página. Para la cabecera, sin embargo, debe usarse un aumento del 20 %, mientras que el código Less disminuye la sa­tu­ra­ción del pie de página un 10 %. En la hoja de estilo CSS, tanto las funciones como la variable de color (@red) se han tra­n­s­fo­r­ma­do, por lo que solo se pueden ver los códigos he­xa­de­ci­ma­les junto con los niveles de sa­tu­ra­ción co­rre­s­po­n­die­n­tes:

Nuestro breve tutorial para pri­n­ci­pia­n­tes solo muestra una pequeña parte de las po­si­bi­li­da­des que hacen del pre­pro­ce­sa­dor CSS una he­rra­mie­n­ta tan útil. Una vez se han definido las variables, los mixins, etc., estos pueden aplicarse en cualquier momento a nuevos elementos de la hoja de estilo sin tener que empezar de cero, como suele ser el caso con el código CSS. Si se modifican valores como el color de base, las mo­di­fi­ca­cio­nes se pueden in­tro­du­cir fá­ci­l­me­n­te en un documento Less con apenas unos clics, lo cual convierte al pre­pro­ce­sa­dor CSS en una gran ayuda a la hora de realizar el proyecto a largo plazo de crear tu propia página web.