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.
< html >
< head >
< title >merge by comma</ title >
< link href = "style.css" rel = "stylesheet" />
</ head >
< body >
< div class = "hello" >< h1 >GeeksforGeeks</ h1 ></ div >
</ body >
</ html >
|
.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:
.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.
< 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 >
|
.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:
.myclass { transform: skew( 12 deg, 12 deg) rotate( 15 deg);
} .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