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
