Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

What are nested rules in LESS ?

  • Last Updated : 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.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

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=
    </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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :