LESS (lenguaje de hojas de estilo)

De Wikipedia, la enciclopedia libre
(Redirigido desde «LESS (stylesheet language)»)
Saltar a: navegación, búsqueda
LESS
LESS Logo.svg
Desarrollador(es)
Alexis Sellier, Dmitry Fadeyev
http://lesscss.org/
Información general
Autor(es) Alexis Sellier
Lanzamiento inicial 2009
Última versión estable 1.7.0[1]
27 de febrero de 2014 (2 años, 10 meses y 24 días)
Género ?
Sistema operativo Multiplataforma
Licencia Licencia Apache 2
Estado actual Activo
En español No
[editar datos en Wikidata]

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.

Variables[editar]

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[editar]

Los mixins permiten incrustrar 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[editar]

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;
}
#header p a:hover {
  border-width: 1px;
}

Funciones y operaciones[editar]

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[editar]

Sass[editar]

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]

Para obtener más comparaciones de sintaxis, consulte https://gist.github.com/674726.

Uso en sitios[editar]

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.

Less software[editar]

Nombre Descripción Licencia de software Plataforma Funcionalidad
WinLess 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
CodeKit 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 Modulo 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[editar]

  1. http://github.com/less/less.js/blob/master/CHANGELOG.md
  2. a b Sass and Less Sass and Less
  3. a b c d Sitio Web oficial de LESS
  4. What's Wrong With CSS What's Wrong With CSS
  5. About Less Acerca de
  6. [1] WinLess github Issue "License Information"
  7. Crunch's LICENSE.txt at github Crunch's LICENSE.txt at github
  8. [2] github license
  9. [3] license file at github (placeholder)
  10. [4] Chirpy License Information at CodePlex
  11. Eclipse Plugin for Less homepage Eclipse Plugin for Less homepage

Enlaces externos[editar]

lesscss.org