Less CSS - SPLessons

Chapter 21

Less  Merge

Less  Merge

This chapter explains about Less Merge, its uses, Merge Comma and Merge Space.

Less Merge is used to combine the values of multiple properties in a list separated by a comma or space under a single property and also used to deal the properties such as transform and background.

The following are the two types of Merge features.

Comma

The property value is added with comma at the end. The feature was released in version 1.5.0.

Below snippet code explains the main scheme of Merge comma in Less.

.mixin() {
box-shadow+: inset 0 0 20px #555;
}
.myclass {
.mixin();
box-shadow+: 0 0 40px black;
}

.myclass {
box-shadow: inset 0 0 20px #555, 0 0 40px black;
}

Below example demonstrates the use of Less Merge comma in Less.
The below conceptual diagram represents the overall view of the example like creating .html and .less files in Nodejs folder and compiling .less to .css.
Create a simple HTML file as shown below in Nodejs folder.

Less_merge_comma.html

<html>
<head>
<title>Merge Comma</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<h1>LESS CSS Tutorials</h1>
<p class="class">Less Merge Comma is awesome.</p>
</body>
</html>

Now, Create a LESS file in the same Nodejs folder.

style.less

h1{
color: #0000FF;
}
.myfunc() {
box-shadow+: 5px 5px 5px grey;
}
.class {
.myfunc();
box-shadow+: 0 0 5px #f78181;
}
// Ignore, is for demo
body {
padding-top: 20px;
text-align: center;
background: rgb(245, 236, 206);
font-family: 'Lato';
}

Compile the above less file in command prompt using the following command.

lessc style.less style.css

By compiling the less file, it automatically generates the following CSS file.

style.css

h1 {
color: #0000FF;
}
.class {
box-shadow: 5px 5px 5px grey, 0 0 5px #f78181;
}
body {
padding-top: 20px;
text-align: center;
background: #f5ecce;
font-family: 'Lato';
}

After making all the required changes, run the html file in a browser to get the following output.

Space

The property value is added with the space. The feature was released in version 1.7.0.

Below snippet code explains the main scheme of Less Merge Space.

.mixin() {
transform+_: scale(5);
}
.myclass {
.mixin();
transform+_: rotate(30deg);
}

.myclass {
transform: scale(5) rotate(30deg);
}

Below example demonstrates the use of Less Merge space in Less.
The below conceptual diagram represents the overall view of the example like creating .html and .less files in Nodejs folder and compiling .less to .css.
Create a simple HTML file in Nodejs folder as shown below.

Less_merge_space.html

<html>
<head>
<title>Merge Comma</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<h2>LESS CSS Tutorials</h2>
<p class="class">Less Merge space is awesome.</p>
</body>
</html>

Create a LESS file in the same Nodejs folder as shown below.

style.less

h2{
color: #0000FF;
}
.mixin() {
transform+_: scale(1);
}
.class {
.mixin();
transform+_: rotate(12deg);
}
// Ignore, is for demo
body {
padding-top: 20px;
text-align: center;
background: rgb(245, 236, 206);
font-family: 'Lato';
}

Compile the above less file in command prompt using the following command.

lessc style.less style.css

By compiling the above less file, it automatically generates the below CSS code.

styel.css

h2 {
color: #0000FF;
}
.class {
transform: scale(1) rotate(12deg);
}
body {
padding-top: 20px;
text-align: center;
background: #f5ecce;
font-family: 'Lato';
}

After making all the required changes, run the html file in a browser to get the following output.

Summary

  • The merging in less deals with different properties such as background and transform.
  • Both the comma and space are the tow important things used in merging for separating the list.

  • Make sure that both the HTML and LESS files are created in the same node js folder.
  • Check all the required changes in the coding before running the application.