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=
"https://cdn.jsdelivr.net/npm/[email protected]">
</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:
Similar Reads
Less.js Nested At-Rules and Bubbling Less.js allows you to nest up different at-rules like @media and @supports and it can be done in the same way as the selectors and normal CSS rules like it is shown in nested rules in LESS. The selector directive is set at the top and the various at-rules can be set into a relative order inside the
4 min read
What is the use of Mixins in LESS ? In this article, we will know what is 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. LE
5 min read
What is the use of Escaping in LESS ? In this article, we will know the concept of Escaping in LESS & how to implement & use it in the LESS code that will generate the corresponding CSS code. By using the CSS preprocessor languages i.e., LESS which helps to reduce the code complexity of writing the CSS. Escaping in LESS, helps u
2 min read
What is the use of operations in LESS ? Similar to many programming languages, LESS also provides arithmetic operations like addition (+), subtraction (-), division (/) and multiplication (*). These operators can make our work a lot easier when used properly. It is as simple as doing basic mathematics in the stylesheets and can be applied
1 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
Less.js Extending Nested Selectors LESS is a simple CSS pre-processor that makes it possible to create manageable, customizable, and reusable style sheets for websites. LESS is a dynamic style sheet language that increases the working power of CSS. LESS is cross-browser compatible. CSS pre-processor is a scripting language that impro
2 min read