What are nested rules in LESS ? - GeeksforGeeks

09 Jul, 2021
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. The below examples will demonstrate this concept of nesting in LESS.
Example 1:
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/less@3.13">    </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:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
CSS-Questions
Picked
SASS
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Design a web page using HTML and CSS
Form validation using jQuery
How to set space between the flexbox ?
Search Bar using HTML, CSS and JavaScript
How to style a checkbox using CSS?
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Hide or show elements in HTML using display property
How to Insert Form Data into Database using PHP ?
REST API (Introduction)