LESS - Merge Comma

Description

It adds property value to the very end.

Example

The following example demonstrates the use of merge comma feature in the LESS file −

<!doctype html>
   <head>
      <title>Merge Comma</title>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <h2>Example of Merge Comma</h2>
      <p class = "class">Hello World!!!Welcome to Tutorialspoint...</p>
   </body>
</html>

Next, create the style.less file.

style.less

.myfunc() {
   box-shadow+: 5px 5px 5px grey;
}

.class {
   .myfunc();
   box-shadow+: 0 0 5px #f78181;
}

You can compile the style.less to style.css by using the following command −

lessc style.less style.css

Execute the above command; it will create the style.css file automatically with the following code −

style.css

.class {
   box-shadow: 5px 5px 5px grey, 0 0 5px #f78181;
}

Output

Follow these steps to see how the above code works −

Save the above html code in the merge_comma.html file.
Open this HTML file in a browser, the following output will get displayed.

less_merge.htm