Ventajas Practicas LESS 2

5º MIXINS.

Como decíamos al inicio del tema, tenemos la opción de embeber propiedades, con lo que podremos crear grupos de propiedades.



Ejemplo:

//definimos una class con bordes

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

// Y podremos incluirla en otras class o id.  

#menu a {
  color: #111;
}
.post a {
  color: red;
  .bordered;
}

  .bordered;

Esto se compilaría como:

#menu a {
  color: #111;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
.post a {
  color: red;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

 Cualquier class o id podrá ser usada.

Dentro de este grupo ampliamos con las "Parametric Mixins"

.border-radius (@radius) {
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}

En las que dejamos un valor abierto que luego podremos definir.

#header {
  .border-radius(4px);
}
.button {
  .border-radius(6px);
}

O bien podemos definir un Mixins inicial.

.border-radius (@radius: 5px) {
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}

 //Usando tan sólo.
 #header {
  .border-radius;
}

También podremos usar las Mixins para propiedades no paramétricas.

.wrap () {
  text-wrap: wrap;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  word-wrap: break-word;
}
pre { .wrap }

Lo que compilaría en:

pre {
  text-wrap: wrap;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  word-wrap: break-word;
}

Mixins a fondo: 

Multiples parámetros.
Los valores múltiples se separarán por "punto y coma" o "coma". Es recomendado usar "punto y coma" ya que la coma puede tener doble significado. Esta puede ser interpretada  como separador de valores mixins o como lísta de css.

Por ejemplo:

//Separad dos argumentos con listas css:
.name (1,2,3; algo, más),
//Tres argumentos numéricos.
.name(1,2,3),
//uso de punto y coma como ayuda en llamadas posteriores para separar listas.
.name(1,2,3;),
//La coma como separador.
.name(@param1: red, blue;).

En estos casos la coma sería usada como listado de CSS no de Mixis.

Rizando el rizo.
Podemos usar el mismo nombre para diferentes mixins,

.mixin(@color) {
color-1: @color;
}
.mixin(@color; @padding:2) {
color-2: @color;
padding-2: @padding;
}
.mixin(@color; @padding; @margin: 2) {
color-3: @color;
padding-3: @padding;
margin: @margin @margin @margin @margin;
}
.some .selector div {
.mixin(#008000);
}

Esto se compilaría como:

 .some .selector div {

color-1: #008000;

color-2: #008000;

padding-2: 2;
}

Por lo que los mixins actúan igual que el css, sin valores definidos tomarán valores  "genéricos dados".

La variable "@arguments" 
Esta variable toma los valores ya usados.

.box-shadow (@x: 0; @y: 0; @blur: 1px; @color: #000) {
  box-shadow: @arguments;
  -moz-box-shadow: @arguments;
  -webkit-box-shadow: @arguments;
}
.box-shadow(2px; 5px);

Se compilará en:

  box-shadow: 2px 5px 1px #000;
  -moz-box-shadow: 2px 5px 1px #000;
  -webkit-box-shadow: 2px 5px 1px #000;

Por lo que será útil para quien no quiera trabajar con parámetros individuales.

La variable @rest. 
Si deseamos que su mixin tome un número variable de argumentos.
El uso de @rest  después de un nombre de variable asignará los argumentos para la variable.

.mixin (...) {        // acepta 0-N argumentos
.mixin () {           // acepta exáctamente 0 argumentos
.mixin (@a: 1) {      // acepta 0-1 argumentos
.mixin (@a: 1; ...) { // acepta 0-N argumentos
.mixin (@a; ...) {    // acepta 1-N argumentos

Además...

.mixin (@a; @rest...) {
   // @rest está ligado a los argugmentos después de @a
   // @arguments se une a todos los argumentos
}

Valores de vuelta / Return Values.
Existes variables definidas dentro de mixins que permiten describir propiedades globales.
Que no se sobrescribirán al estar protegidas.

.mixin() {
  @global: in-mixin;
  @local: in-mixin;
  @definedOnlyInMixin: in-mixin;
}
.class {
  @local: localy-defined-value; //local variable - protected
  margin: @global @local @definedOnlyInMixin;
  .mixin();
}
@global: outer-scope; // non-local variable - rewritten

Se compila en:

.class {
  margin: in-mixin localy-defined-value in-mixin;
}

Desbloqueando Mixins  
Podemos definir variables bloqueadas que tomen valores sólo en el caso de que ocurra algo.

.unlock(@value) { // outer mixin
  .doSomething() { // nested mixin
    declaration: @value;
  }
}
.selector {
  .unlock(5); // unlock doSomething mixin - must be first
  .doSomething(); //nested mixin was copied here and is usable
}

 Se compila en:

.selector {
  declaration: 5;
}

Estas mixins bloqueadas tienen que estar ordenadas de forma Unlock--->dosomething.  Sí usamos un dosomething---> Unlock no valdrá para nada.

!Important
Este mixin como bien indica su nombre hace que todos los valores sean tomados como i !Important

Ejemplo: 

.mixin (@a: 0) {
  border: @a;
  boxer: @a;
}
.unimportant {
  .mixin(1);
}
.important {
  .mixin(2) !important;
}

Nos devolverá:

.unimportant {
  border: 1;
  boxer: 1;
}
.important {
  border: 2 !important;
  boxer: 2 !important;
}