What are nested rules in LESS ?
Last Updated :
08 May, 2023
In this article we will learn about nested rules in Less, We can very easily define nested rules in LESS. Nested rules are defined as 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 mixin in the same way as CSS styles. It can store multiple values and can be reused in code as necessary.
One must have heard the word nested probably referring to nested tables in old table design websites. With LESS, we’re basically doing the same concept, but with nesting LESS rules within other rules.
Example 1: In this example, we will demonstrate the concept of nesting in LESS.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
type="text/css" href="style.css" />
</head>
<body>
<div class="container">
<h1>Example of less</h1>
<p>We will discuss LESS here.</p>
<div class="MyClass">
<h1>Geeks for Geeks portal</h1>
<p>
Nested rules are clever about
handling selector lists
</p>
</div>
</div>
</body>
</html>
|
We will next create the style.less file.
.container {
h1 {
font-size: 24px;
color: red;
}
p {
font-size: 24px;
color: blue;
}
.myclass {
h1 {
font-size: 24px;
color: red;
}
p {
font-size: 24px;
color: blue;
}
}
}
We can compile the style.less file to style.css using the following command.
lessc style.less style.css
After executing the above command, the style.css file is created with the following code.
.container h1 {
font-size: 24px;
color: red;
}
.container p {
font-size: 24px;
color: blue;
}
.container .MyClass h1 {
font-size: 24px;
color: red;
}
.container .MyClass p {
font-size: 24px;
color: blue;
}
Output:
Example 2: In this example, we will use the LESS JavaScript file that will cause the browser to automatically compile LESS code to CSS. However, it is not recommended to use this in production as it could affect the performance of the website.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet/less"
type="text/css"
href="style.less" />
<script type="text/javascript"
src=
</script>
</head>
<body>
<div class="Important">
<div class="Different">
GeeksforGeeks
</div>
<div class="Nestedrules">
LESS Nesting example!
</div>
</div>
</body>
</html>
|
We will next create the style.less file.
.Important {
color: green;
.Different {
font-size: 40px;;
}
.Nestedrules {
font-size: 20px;
}
}
The browser will automatically compile the LESS code to CSS and the resulting page can be viewed in the browser. The final compiled CSS would be like the one below.
.Important {
color: green;
}
.Important .Different {
font-size: 40px;
}
.Important .Nestedrules {
font-size: 20px;
}
Output:
Share your thoughts in the comments
Please Login to comment...