Less.js Merge

0 0 2 minutes read

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>zambiatek</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.