LESS (lenguaje de hojas de estilo)

LESS
Información general
Tipo de programa	lenguaje de hoja de estilos
Autor	Alexis Sellier
Desarrollador	Alexis Sellier, Dmitry Fadeyev
Lanzamiento inicial	2009
Licencia	Licencia Apache 2
Estado actual	Activo
Información técnica
Programado en	JavaScript
Versiones
Última versión estable	1.7.0​ ( 27 de febrero de 2014 (10 años, 2 meses y 6 días))
Enlaces
Sitio web oficial Repositorio de código

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.​ 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.​ LESS se puede ejecutar en el lado del cliente y del lado del servidor, o se puede compilar en CSS sin formato.

Variables

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.​

@color: #4D926F;
@background: #3d3d3d;

#header {
  color: @color;
  background:@background;
}
h2 {
  color: @color;
}

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

#header {
  color: #4D926F;
  background: #3d3d3d;
}
h2 {
  color: #4D926F;
}

Mixin

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.​

.rounded-corners (@radius: 5px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}

#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}

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

#header {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
#footer {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

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.

Anidamiento

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.​

#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p {
    font-size: 16px;
    a {
      text-decoration: none;
      color: red;
      &:hover {
        border-width: 1px;
        color: #fff;
      }
    }
  }
}

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

#header h1 {
  font-size: 26px;
  font-weight: bold;
}
#header p {
  font-size: 16px;
}
#header p a {
  text-decoration: none;
  color: red;
}
#header p a:hover {
  border-width: 1px;
  color: #fff;
}

Funciones y operaciones

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.

@the-border: 1px;
@base-color: #111;
@red:        #842210;

#header {
  color: @base-color * 3;
  border-left: @the-border;
  border-right: @the-border * 3;
}
#footer {
  color: @base-color + #003300;
  border-color: desaturate(@red, 10%);
}

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

#header {
  color: #333333;
  border-left: 1px;
  border-right: 3px;
}
#footer {
  color: #114411;
  border-color: #7d2717;
}

Comparación

Sass

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.​

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.​ 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).​

Uso en sitios

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.

Software relacionado

Nombre	Descripción	Licencia	Plataforma	Funcionalidad
WinLess	GUI Compilador de Less	Apache 2.0​	Windows	Compilador
Crunch	Less editor y compilador (requiere Adobe AIR)	GPL​	Windows, Mac OS X	Compiler Editor
less.js-windows	Simple command-line utility for Windows that will compile *.less files to CSS using less.js.	MIT License​	Windows	Compiler
less.app	Compilador Less	Proprietario	Mac OS X	Compilador
CodeKit	Compilador Less	Proprietario	Mac OS X	Compilador
LessEngine	Compilador Less	Gratis	Plugin OpenCart	Compilador
SimpLESS Archivado el 29 de julio de 2013 en Wayback Machine.	Compilador Less	Libre pero sin licencia explícita​	Windows Mac OS X Linux	Compilador
Chirpy Archivado el 21 de abril de 2013 en Wayback Machine.	Compilador Less	Ms-PL​	Plugin Visual Studio	Compilador
Mindscape Web Workbench	Resaltado de sintaxis e IntelliSense para Less ySass	Proprietario	Plugin Visual Studio	Compilador Resaltado de sintaxis
Eclipse Plugin for Less	Eclipse Plugin	EPL 1.0​	Plugin para Eclipse	Resaltado de sintaxis Asistencia de contenido Compilador
mod_less	Módulo de Apache2 para compilar Less a vuelo	Open Source	Linux	Compilador
grunt-contrib-less	Node.js Grunt task para convertir Less a CSS	Open Source	Node.js	Compilador
Web Essentials Archivado el 11 de noviembre de 2016 en Wayback Machine.	Extensión Visual Studio con soporte para Less y Sass	Apache 2.0	Windows	Resaltado de sintaxis, Asistente de contenido, Compilador
clessc	Pure C++ Compilador	GPL	Al menos Windows, Linux y MacOS	Compilador

Enlaces externos

• Sitio web oficial de Less

• Datos: Q1107192