Less.js Merge Last Updated : 16 Feb, 2023 Comments Improve Suggest changes Like Article Like Report 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; } Output: Reference: https://lesscss.org/features/#merge-feature Comment More infoAdvertise with us Next Article Less.js Merge K kumarbalit8 Follow Improve Article Tags : JavaScript Web Technologies LESS Similar Reads Less.js Variables LESS (Leaner Style Sheets) is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. It is a dynamic style sheet language that enhances the working power of CSS. LESS supports cross-browser compatibility. CSS pre-processor is a s 4 min read Less.js Mixins In this article, we will see the Mixins in LESS, along with understanding their implementation & usage through the example. A CSS preprocessor is a program that generates the CSS code by using the defined preprocessor ruleset & facilitates reducing the overall complexity of CSS code. LESS is 4 min read CSS Preprocessor LESS LESS (Leaner Style Sheets) is a CSS preprocessor that extends CSS with dynamic behavior, including variables, nesting, mixins, and mathematical operations, all while maintaining compatibility with standard CSS. Pre-Requisites:Basic knowledge of HTML and CSSKey Features of LESSVariables: Store reusab 5 min read Less.js Mixins Namespaces Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. It is better since CSS uses a dynamic style sheet language. LESS is flexible enough to be utilized by a wide range of browsers. Web browsers can only use CSS if it 3 min read Less.js Programmatic Usage Programmatic usage of Less.js involves utilizing the Less JavaScript API to compile Less code into CSS dynamically. This is commonly done in web development to generate stylesheets on the fly or to integrate Less.js into build processes. Less.render FunctionThis function is provided by Less.js libra 3 min read Less.js @plugin At-Rules In this article, we will understand the concepts related to Less.js @plugin At-Rules with different illustrations and examples. Less.js @plugin At-Rules is used to import the JavaScript plugin to add additional functions and features. Basically using the @plugin at rule is similar to an @import for 4 min read Less.js @import At-Rules Less.js @import At-Rules is basically used to import the file which is in the source code. And we can put the @import statement anywhere in the source code. And @import At-Rules allow us to spread the less code over to different files. Using the @import keyword we can separate and maintain our code 3 min read Less.js Variables Overview The Variables in LESS.js govern the common values used in a single location, ie, they are known to keep values stored in them and can be used anywhere within the definition of code. LESS allows you to use these variables to change the specific value in the entire code. It might get troublesome when 2 min read Less.js Mixins Recursive Mixins A CSS preprocessor is a program that generates the CSS code by using the defined preprocessor ruleset and facilitates reducing the overall complexity of CSS code. LESS is a CSS preprocessor that is a CSS backward-compatible language extension. Mixins in LESS, are a way to include a bunch of CSS prop 3 min read Less.js @import At-Rules less In this article, we will see that Less.js @import At-Rules is basically used to import the file which is in the source code. And we can put the @import statement anywhere in the source code. And @import At-Rules allow us to spread the less code over to different files. Using the @import keyword we c 2 min read Like