Tutorial Less: 12. Combinar los valores de una propiedad en Less (Merge)

Less permite combinar los valores de una propiedad definidos en distintos lugares para que en lugar de sobrescribirse que es el comportamiento de CSS para estas situaciones, se vayan incluyendo los nuevos valores como una lista de valores separados por comas o por espacios dependiendo de la forma en la que se haga.

Esta característica solo tiene sentido para usarse con propiedades que soporten listas de valores como los fondos, los sombreados, las transformaciones, animaciones y transiciones o las familias de fuentes, pero en realidad se pueden usar con cualquier propiedad aunque no tenga mucho sentido.

Sintaxis del merge en Less

Hay 2 posibilidades para combinar las listas de propiedades, separándolas por comas o por espacios, que se haga de un modo u otro depende de la sintaxis utilizada.

• Para separar por comas hay que añadir + como sufijo al nombre de la propiedad. Ej. animation+: mianimacion 1s infinite;
• Para hacer la separacion por espacios el sufijo es +_. Ej. transform+_: rotate(15deg);

Ejemplos de uso de combinaciones de valores de propiedades en Less

El uso normal de esta característica se hace combinado con los mixins ya que estos nos permiten definir un conjunto de propiedades que luego podemos reutilizar y por lo tanto podemos por ejemplo definir una animación base que queremos reutilizar en varios lugares pero solo con los mixins siempre tendríamos las misma animación y es aquí donde la posibilidad de combinar las propiedades nos ofrece todos sus beneficios porque podemos reutilizar esa parte común y añadirle más animaciones para cada caso concreto, es decir, podríamos verlo como un mixin para propiedades.

@keyframes horizontal {
  from {left: 0px;}
  to {left: 200px;}
}

@keyframes vertical {
    from {top: 0px;}
    to {top: 200px;}
}

@keyframes color {
  from {background: red;}
  to {background: blue;}
}

.animacionBase() {
  animation+: horizontal 2s infinite;
}

.animacionDiagonal {
  .animacionBase();
  animation+: vertical 2s infinite;   
}

Con este ejemplo podemos ver cómo podemos definir una animación a trozos y combinarlos en una única animación más compleja.

@keyframes horizontal {
  from {left: 0px;}
  to {left: 200px;}
}

@keyframes vertical {
    from {top: 0px;}
    to {top: 200px;}
}

@keyframes color {
  from {background: red;}
  to {background: blue;}
}

.animacionDiagonal {
  animation: horizontal 2s infinite, color 2s infinite, vertical 2s infinite;
}

Para que se combinen los valores de una propiedad tiene que llevar el + o +_ en todos los lugares en los que se quiere hacer la combinación independientemente de si son el origen o el destino.

Los resultados si lo quitamos en cada uno de los 3 por separado serían los siguientes, y como se puede apreciar el resultado en todos los casos refleja que puede que estemos haciendo algo mal porque la propiedad animación esta repetida en todos los casos y en el primer y tercer caso el resultado podría ser el esperado si lo hemos hecho conscientemente pero en el 2º caso por ejemplo está mal lo mires por donde lo mires porque en caso de querer ese resultado no tendría sentido definir la propiedad animación en animacionDiagonal.

/* resultado con animacionBase sin + */

.animacionDiagonal {
  animation: horizontal 2s infinite;
  animation: color 2s infinite, vertical 2s infinite;
}

/* resultado con animacionBase2 sin + */

.animacionDiagonal {
  animation: horizontal 2s infinite, vertical 2s infinite;
  animation: color 2s infinite;
}

/* resultado con animacionDiagonal sin + */

.animacionDiagonal {
  animation: horizontal 2s infinite, color 2s infinite;
  animation: vertical 2s infinite;
}

Por lo tanto hay que tener un poco de cuidado al usar esta funcionalidad para no obtener resultados indeseados.

También se pueden combinar propiedades sin usar mixins escribiéndola varias veces dentro del mismo selector, pero en este caso no aporta nada salvo remarcar que la propiedad tiene varios valores aunque es igual de probable que solo genere confusión.

.cuadrado {
  transform+_: skewX(45deg);
  transform+_: rotate(20deg)
}

El resultado de la compilación son ambas transformaciones separadas por un espacio ya que hemos utilizado +_ en este caso.

.cuadrado {
  transform: skewX(45deg) rotate(20deg);
}