Less nesting rule

Time:2021-5-9

describe
It is a set of CSS properties that allow the properties of one class to be used for another class and contain the class name as its property. In less, you can use class or ID selectors to declare mixins in the same way as CSS styles. It can store multiple values and can be reused in code if necessary.

example
The following example demonstrates the use of nesting rules in a less file:

<html>
<head>
   <title>Nested Directives</title>
   <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body class="container">
   <h1>Example using Nested Directives</h1>
   <p class="myclass">LESS enables customizable, manageable and reusable style sheet for web site.</p>
</body>
</html>

Next, create the file style. Less.

style.less

.container{
  h1{
       font-size: 25px;
       color:#E45456;
 }
  p{
       font-size: 25px;
       color:#3C7949;
  }

 .myclass{
  h1{
        font-size: 25px;
        color:#E45456;
  }
  p{
       font-size: 25px;
       color:#3C7949;
  }
 }
}

You can compile the style.less file to style.css using the following command:
lessc style.less style.css
Next, execute the above command, which will automatically create the style.css file with the following code:

style.css

.container h1 {
  font-size: 25px;
  color: #E45456;
}
.container p {
  font-size: 25px;
  color: #3C7949;
}
.container .myclass h1 {
  font-size: 25px;
  color: #E45456;
}
.container .myclass p {
  font-size: 25px;
  color: #3C7949;
}

output
Let’s take the following steps to see how the above code works:

Save the above HTML code in nested_ Rules. HTML file.

Open the HTML file in a browser and the following output will be displayed.

Less nesting rule