LESS is a Leaner Style Sheets, which is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites.Less.js Merge is used to extend or aggregate multiple properties into a comma or space separated list under a single property. So merge is basically used in two ways comma merge (+) and space merge  (+_). Merge is useful for properties such as background and transform.
We can use less merge in two ways:
1. Comma: Merge with a comma (+). It adds property value at the end.
Â
Syntax:Â Â
.merge() {
box-shadow+: 10px 10px 10px blue;
}
2. Space: Merge with a space(_+). It adds property value with space.
Syntax:
.mixin() {
transform+_: skew(12deg, 12deg);
}
Example 1: The following example demonstrates the use of less.js Merge with a comma (+). It adds property value at the end.
index.html
<html> Â Â Â Â <head> Â Â Â Â Â Â Â Â <title>merge by comma</title>Â Â Â Â Â Â Â Â Â Â Â <link href="style.css" rel="stylesheet" /> Â Â Â Â Â Â </head> Â Â Â Â <body> Â Â Â Â Â Â Â Â <div class="hello"><h1>neveropen</h1></div> Â Â Â Â </body> Â Â Â Â Â Â </html> |
style.less
.merge() { Â Â Â Â box-shadow+: 10px 10px 10px blue; } .hello { Â Â Â Â .merge(); Â Â Â Â box-shadow+: 5px 5px 10px #ff0000; } |
Now, to compile the above LESS code to CSS code, run the following command:
less styles.less styles.css
The compiled CSS file comes to be:Â
style.css
.hello {     box-shadow: 10px 10px 10px blue,                   5px 5px 10px #ff0000; } |
Output:
Â
Example 2: The following example demonstrates the use of less.js Merge with Space. It adds property value with space.
index.html
<html> Â Â <head> Â Â Â Â <title>merge by space</title> Â Â Â Â <link href="style.css" rel="stylesheet" /> Â Â </head> Â Â <body> Â Â Â Â <div class="div-box"> Â Â Â Â Â Â Â Â <h1>neveropen</h1> Â Â Â Â </div> </body> Â Â </html> |
style.less
.mixin() { Â Â Â Â transform+_: skew(12deg, 12deg); } .myclass { Â Â Â Â .mixin(); Â Â Â Â transform+_: rotate(15deg); } .div-box { Â Â Â Â height: 150px; Â Â Â Â width: 300px; Â Â Â Â padding: 50px 50px; Â Â Â Â text-align: center; Â Â Â Â color: green; Â Â Â Â background-color: black; } |
Now, to compile the above LESS code to CSS code, run the following command:
less styles.less styles.css
The compiled CSS file comes to be:Â
style.css
.myclass { Â Â Â Â transform: skew(12deg, 12deg) rotate(15deg); } .div-box { Â Â Â Â height: 150px; Â Â Â Â width: 300px; Â Â Â Â padding: 50px 50px; Â Â Â Â text-align: center; Â Â Â Â color: green; Â Â Â Â background-color: black; } |
Output:Â
Â
Reference: https://lesscss.org/features/#merge-feature
