Ventajas Practicas LESS 1

Ejemplos Practicos "LESS"

1º Trabajar sumando variables.

@nice-blue: #5B83AD;
@light-blue: (@nice-blue + #111);
#header { color: @light-blue; }

2º Variables con nombre.

@hola: "Hola mundo.";
@var: 'hola';
content: @@var;

Se compilaría en:

content: "Hola mundo.";

3º  Cuando usas variables repetidas la ultima es la usada.
La forma de empleo se asemeja a la de CSS clásico.
Cuando usamos variables, la última es la que define el valor.

Ejemplo:

@var: 0;
.class1 {
  @var: 1;
  .class {
    @var: 2;
    three: @var;
    @var: 3;
  }
  one: @var;
}

Se compilará:

 .class1 .class {
  three: 3;
}
.class {
  one: 1;
}

4º  Uso de patrón "Lazy loading".  Las variables no tienen que ser definidas antes que su uso.

lazy-eval {
  width: @var;
}
@var: @a;
@a: 9%;

O

.lazy-eval-scope {
  width: @var;
  @a: 9%;
}
@var: @a;
@a: 100%;

Se compilará en

.lazy-eval-scope {
  width: 9%;
}