Quickly get Less - Merge

1 Overview

It is used to merge attributes. Merging realizes the aggregation of multiple values ​​​​of the same attribute. There are two ways to aggregate, using commas or spaces.

Merging is useful when working with attributes such as background.transform

2. comma

Add after the attributes that need to be merged +, so that the final generated attribute values ​​are aggregated with commas.

.mixin() {
  box-shadow+: inset 0 0 10px #555;
}
.myclass {
  .mixin();
  box-shadow+: 0 0 20px black;
}

The generated result is as follows:

.myclass {
    
    
  box-shadow: inset 0 0 10px #555, 0 0 20px black;
}

3. Space

Add after the attributes that need to be merged +_, so that the final generated attribute values ​​are aggregated with spaces.

.mixin-1() {
  transform+_: scale(2);
}
.myclass-1 {
  .mixin-1();
  transform+_: rotate(15deg);
}

The generated result is as follows:

.myclass-1 {
    
    
  transform: scale(2) rotate(15deg);
}

To achieve merging, you must add +or +_.