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.
| 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[1] 27 de febrero de 2014 (7 años, 5 meses y 5 días) | |
| Asistencia técnica | ||
| Enlaces | ||
| Sitio web oficial Repositorio de código | ||
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.
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.[3]
@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.[3]
.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.[3]
#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.[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]
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 |
|---|---|---|---|---|
| GUI Compilador de Less | Apache 2.0[6] | Windows | Compilador | |
| Crunch | Less editor y compilador (requiere Adobe AIR) | GPL[7] | 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[8] | Windows | Compiler |
| less.app | Compilador Less | Proprietario | Mac OS X | Compilador |
| Compilador Less | Proprietario | Mac OS X | Compilador | |
| LessEngine | Compilador Less | Gratis | Plugin OpenCart | Compilador |
| SimpLESS | Compilador Less | Libre pero sin licencia explícita[9] | Windows Mac OS X Linux | Compilador |
| Chirpy | Compilador Less | Ms-PL[10] | 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[11] | 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 | 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 |
Referencias
- http://github.com/less/less.js/blob/master/CHANGELOG.md
- ↑ Sass and Less el 21 de junio de 2009 en Wayback Machine. Sass and Less
- ↑ Sitio web oficial de LESS
- What's Wrong With CSS What's Wrong With CSS
- About Less Acerca de
- [1] WinLess github Issue "License Information"
- Crunch's LICENSE.txt at github Crunch's LICENSE.txt at github
- [2] github license
- [3] license file at github (placeholder)
- [4] Chirpy License Information at CodePlex
- Eclipse Plugin for Less homepage Eclipse Plugin for Less homepage
Enlaces externos
- Sitio web oficial de Less