Java

LESS.JS
Hhaz más con menos

¿Qué es Less.js?
Less es un preprocesador para CSS. - Nos permite trabajar con hojas de estilo con funcionalidades de un lenguaje de programación. - Existen otros preprocesadores como SASS o Stylus, aunque sólo LESS.js se puede integrar desde el front.

¿Qué ventajas tiene?
Sus principales ventajas son: - Nos permite ser más productivos - Ayuda a organizarmejor nuestras hojas de estilo y a la compatibilidad entre navegadores. - El código que generamos es reutilizable

Instalación y uso
- Descargar el archivo de http://lesscss.org/ - Cargar dentro del head de la página el archivo .css o .less. No importa la extensión pero hay que indicar el atributo 'rel' como stylesheet/less


- Después hay que llamar al script.


- Less.js funciona enservidor, ya sea remoto o local.

Los principales aspectos de Less
- Variables - Operaciones - Anidamiento - Mixins - Sin parámetros - Con parámetros - Condicionales - Funciones

Variables
En realidad se trata de costantes. Las variables se definen de la siguiente forma: @size: 100px; @color: #ff3; @ruta: 'images/background.gif';

Variables
Las variables en Less pueden tener ámbito globalo local:
@colorbase: red; body{ @colorbase: blue; color: @colorbase; } //Salida: body{ color: blue; }

Variables
Las variables del tipo string se pueden embeber dentro de otra cadena de manera similar a como se hace en PHP, es decir, mediante llaves:
@rutabase: "www.antonionavajas.com"; background-image: url("@{rutabase}/images/fondo.png");

Variables
En ocasiones encontraremosexpresiones no reconocidas por CSS (por ejemplo los filtros de IE). En este caso y para evitar errores usaremos el carácter de escape '~' para evitar que esa sentencia se trate:
filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()"; //Salida filter: ms:alwaysHasItsOwnSyntax.For.Stuff();

Operaciones
Las variables son susceptibles de operaciones:
@ancho: 100px; div{ width: @ancho * 2; } //Salida div{ width:200px; }

Operaciones
Less diferencia las unidades usadas en cada operación:
@colorbase: #eee + #111; //Valor de salida de @colorbase: color: #fff;

Operaciones
La jerarquía de las operaciones es la común en cualquier lenguaje de programación:
*, /, +, -.

Podemos alterar esta jerarquía mediante el uso de paréntesis:
@distancia: 10px; @size: @distancia / (8 - 3); //Salida @size: 2px;Operaciones
Podemos usar operaciones dentro de una sentencia shorthand siempre que separemos por espacios: @distancia: 10px; margin: @distancia @distancia / 2; //Salida margin: 10px 5px;

Anidamiento
Less permite anidar clases.
body{ width: 100px; article{ width: 200px; } } //salida body{ width: 100px; } body article{width: 100px; }

Anidamiento
Para indicar que concatenamos enlugar de anidar usamos el operador &:
div{ width: 100px; &.clase{ width: 50px; } } //salida div{width: 100px;} div.clase{width: 50px;}

Anidamiento
Esto también se aplica para propiedades como :hover, :active, :visited...
a{ color: blue; &:hover{ color: red; } } //salida a{color:blue;} a:hover{color: red;}

Mixins
- Tal vez el aspecto más interesante de Less son los Mixins, es decir,conjuntos de reglas que se pueden anidar dentro de otras reglas. - Su funcionalidad es similar a la de una función.

Mixins
.derecha{ float: right; text-align: right; } div{ width: 100px; height: auto; .derecha; } //Salida div{ width: 100px; height: auto; float: right; text-align: right; }

Mixins
Similar a las funciones, los mixins pueden recibir parámetros:
.contenido(@var: ''){ content: @var;} div{ display: inline-block; .contenido('Pandereta'); }

Mixins
Se pueden enviar y recibir varios parámetros siempre que en la definición del mixin se separen por comas:
.borderradius(@a:0px, @b:0px, @c:0px, @d:0px){ border-radius: @a @b @c @d; }

Mixins
En el caso de mixins con varios parámetros podemos usar la variable reservada @arguments que cargará de manera consecutiva todos los...