LESS (stylesheet language)

De Wikipedia, la enciclopedia libre
Saltar a: navegación, búsqueda
LESS
Less.png
Desarrollador
Alexis Sellier, Dmitry Fadeyev
http://lesscss.org/
Información general
Diseñador Alexis Sellier
Lanzamiento inicial 2009
Última versión estable 1.7.0[1]
2014 de febrero de 27; hace 6 meses (27-02-2014)
Género ?
Sistema operativo Multiplataforma
Licencia Licencia Apache 2
Estado actual Activo
En español No No


LESS (lenguaje de hojas de estilo) es un lenguaje dinámico de hoja de estilos 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 tipo 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 con sangría de LESS es un metalenguaje anidado, como código CSS válido es código LESS válido 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 a través de LESS.js[2] 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[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.[2]

@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;
}

Mixins[editar]

Los mixins permiten embeber 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.[2]

.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 que se pueden mezclar como en las clases, pero aceptan parámetros.

Referencias[editar]

  1. http://github.com/less/less.js/blob/master/CHANGELOG.md
  2. a b c Sitio Web oficial de LESS

Enlaces externos[editar]

lesscss.org