LESS (lenguaje de hojas de estilo)

Less (a veces estilizado como LESS) es un dinámico lenguaje de hojas de estilo que puede ser compilado en hojas de estilo en cascada (CSS) y ejecutarse en el lado del cliente o en el lado del servidor. Diseñado por Alexis Sellier. Está influenciado por Sass y ha influido en la nueva sintaxis "SCSS" de Sass, que adaptó su sintaxis de formato de bloque similar al de CSS.^[2]​ LESS es de código abierto. Su primera versión fue escrita en Ruby, sin embargo, en las versiones posteriores, se abandonó el uso de Ruby y se lo sustituyó por JavaScript. La sintaxis indentada de Less es un metalenguaje anidado, lo que es válido en CSS es válido en SCSS con la misma semántica. LESS proporciona los siguientes mecanismos: variables, anidamiento, operadores, mixins y funciones.

La principal diferencia entre Less y otros precompiladores CSS es que Less permite la compilación en tiempo real vía less.js por el navegador.^[3]​ LESS se puede ejecutar en el lado del cliente y del lado del servidor, o se puede compilar en CSS sin formato.

LESS permite que se definan las variables. Las variables de LESS se definen con una arroba (@). La asignación de variables se hace con dos puntos (:). Durante la traducción, los valores de las variables se insertan en el documento CSS de salida.^[3]​

El código anterior en LESS compilaría en el siguiente código CSS:

Los mixins permiten incrustar todas las propiedades de una clase dentro de otra clase al incluir el nombre de la clase como una de sus propiedades, comportándose así en una especie de constante o variable. También pueden comportarse como funciones y tomar argumentos. CSS no soporta mixins, cualquier código repetido se tiene que repetir en cada lugar. Los mixins permiten repeticiones de código más eficientes y limpias, así como modificaciones de código más fáciles y rápidas.^[3]​

El código anterior en LESS compilaría en el siguiente código CSS:

LESS tiene un tipo especial de conjunto de reglas llamado mixins paramétricos (parametric mixins) que se pueden mezclar como en las clases, pero aceptan parámetros.

CSS admite anidamiento lógico, pero los bloques de código no están anidados. LESS permite anidar los selectores dentro de otros selectores. Esto hace la herencia clara y las hojas de estilo más cortas.^[3]​

El código anterior en LESS se compilará como el siguiente código CSS:

LESS permite operaciones y funciones. Las operaciones permiten la suma, resta, división y multiplicación de valores de propiedades y colores, que se pueden utilizar para crear relaciones complejas entre propiedades. Las funciones son transformaciones uno a uno con código JavaScript, permitiendo la manipulación de valores.

El código anterior en LESS se compilará como el siguiente código CSS:

Tanto Sass y Less son preprocesadores CSS, que permiten escribir un CSS limpio en una construcción de programación en lugar de reglas estáticas.^[4]​

Desde Less 1.4, Less soporta anidamiento, herencias de reglas mediante &:extends y el pseudo-selector @extends. Antes de esto, una diferencia principal entre Less y otros preprocesadores como Sass era la falta de una directiva @extends para soportar herencia de reglas entre clases, lo que conduce a un CSS más limpio con menos duplicación.

Less es inspirado por Sass.^[5]​ Sass fue diseñado para simplificar y extender el CSS, por lo que cosas como las llaves se retiraron de la sintaxis. Less fue diseñado para estar lo más cerca posible del CSS y, como resultado, CSS existente puede utilizarse como código Less válido.

Las nuevas versiones de Sass también introdujeron una sintaxis similar a CSS llamada SCSS (Sass CSS).^[2]​

Less puede aplicarse a los sitios de varias maneras. Una opción es incluir el archivo less.js JavaScript para convertir el código sobre la marcha. El navegador entonces procesa el CSS de salida. Otra opción es convertir el código Less en CSS puro y subir el CSS a un sitio. Con esta opción no se cargan archivos sin importar y el sitio no necesita el convertidor less.js JavaScript.

---