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. 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.
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.
Usar con Node.js:
npm install -g less
> lessc styles.less styles.css
O el navegador:
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="//cdn.jsdelivr.net/npm/less@3.13" ></script>
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: #ffffff;
@background: #000000;
#header {
color: @color;
background:@background;
}
h2 {
color: @color;
}
El código anterior en LESS compilaría en el siguiente código CSS:
#header {
color: #ffffff;
background: #000000;
}
h2 {
color: #ffffff;
}
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.
Entonces digamos que tenemos la siguiente clase:
.borde {
border-top: solid 1px black;
border-bottom: solid 2px black;
}
Y queremos usar estas propiedades dentro de otros conjuntos de reglas. Solo tenemos que colocar el nombre de la clase donde queremos las propiedades, así:
#menu a {
color: #808080;
.borde();
}
.post a {
color: red;
.borde();
}
Las propiedades de la .borde ahora aparecerán en ambos #menu a y .post a, también puede usar #ids como mixins.
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: 50px;
font-weight: bold;
}
p {
font-size: 30px;
a {
text-decoration: none;
color: blue;
&:hover {
border-width: 1px;
color: #ffffff;
}
}
}
}
El código anterior en LESS se compilará como el siguiente código CSS:
#header h1 {
font-size: 50px;
font-weight: bold;
}
#header p {
font-size: 30px;
}
#header p a {
text-decoration: none;
color: #blue;
}
#header p a:hover {
border-width: 1px;
color: #ffffff;
}
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.
Ejemplo:
@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;
}
Para más información gráfica consulte los siguientes videos:
https://es.wikipedia.org/wiki/LESS_(lenguaje_de_hojas_de_estilo)#Variables
BIBLIOGRAFÍA
https://es.wikipedia.org/wiki/LESS_(lenguaje_de_hojas_de_estilo)#Variables