Less.js Merge

Last Updated : 16 Feb, 2023

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>GeeksforGeeks</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>GeeksforGeeks</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; 
}