Less.js Nested At-Rules and Bubbling

Last Updated : 06 Jun, 2023

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 ruleset after compilation the relative order stays the same and this process is called the bubbling process.

Nested At-Rules and Bubbling used classes: No specific class or method is used to implement the nested At-Rules and Bubbling. This is a technique that can be implemented using basic at-rules.

Syntax:

// The below LESS code is compiled using the 
// less compiler to transform this into basic
// CSS rules Code
.component {
      // CSS rules
      @media (min-width: value) {
        // CSS rules
        @media  (min-width: value) {
              // CSS rules
        }
      }
      @media (min-width: value) {
        // CSS rules
      }
}

Example 1: The example shows the implementation of the nested @media at-rule and it shows how we can set nested media queries after compilation it comes to normal form in CSS rules.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" 
        type="text/css" href="styles.css" /> 
</head> 
  
<body> 
    <h1 style="color:green;"> 
        GeeksforGeeks 
    </h1> 
      
    <h3>Less.js Nested At-Rules and Bubbling</h3> 
      
    <div class="container-1"> 
        <p>This is the first container.</p> 
        <br> 
        <p>This is visible in viewport above size 1280px.</p> 
    </div> 
  
    <div class="container-2"> 
        <p>This is the first container.</p> 
        <br> 
        <p> 
            This is visible in viewport above size  
            468px and invisble above 1280px. 
        </p> 
    </div> 
</body> 
  
</html>

style.less: This is the less file containing the nested at-rules:

CSS

.container-1 { 
    font-family: monospace; 
    font-size: 1rem; 
    background-color: green; 
    width: 30rem; 
    text-align: center; 
    padding: 150px 0; 
    margin: 0 auto; 
    @media (min-width: 468px) {  
        display: none; 
    } 
    @media (min-width: 1280px) {  
        display: block; 
    } 
} 
.container-2 { 
    font-family: monospace; 
    font-size: 0.75rem; 
    background-color: black; 
    width: 30rem; 
    text-align: center; 
    padding: 150px 0; 
    p{ 
        color: aliceblue; 
    } 
    @media (min-width: 468px) {  
        display: block; 
    } 
    @media (min-width: 1280px) {  
        display: none; 
    } 
}

Now, to compile the above LESS code to CSS code, run the following command:

lessc style.less styles.css

The compiled CSS file comes to be:

styles.css:

CSS

.container-1 { 
    font-family: monospace; 
    font-size: 1rem; 
    background-color: green; 
    width: 30rem; 
    text-align: center; 
    padding: 150px 0; 
    margin: 0 auto; 
} 
  
@media (min-width: 468px) { 
    .container-1 { 
        display: none; 
    } 
} 
  
@media (min-width: 1280px) { 
    .container-1 { 
        display: block; 
    } 
} 
  
.container-2 { 
    font-family: monospace; 
    font-size: 0.75rem; 
    background-color: black; 
    width: 30rem; 
    text-align: center; 
    padding: 150px 0; 
} 
  
.container-2 p { 
    color: aliceblue; 
} 
  
@media (min-width: 468px) { 
    .container-2 { 
        display: block; 
    } 
} 
  
@media (min-width: 1280px) { 
    .container-2 { 
        display: none; 
    } 
}

Output:

Example 2: The example shows the implementation of the nested @support at-rule and it shows how we can set nested support at-rules after compilation it comes to normal form in CSS rules:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" 
        type="text/css" href="styles.css" /> 
</head> 
  
<body> 
    <h1 style="color:green;"> 
        GeeksforGeeks 
    </h1> 
      
    <h3>Less.js Nested At-Rules and Bubbling</h3> 
      
    <div class="container"> 
        <div class="container-1"> 
            <p>This is the first container.</p> 
        </div> 
        <div class="container-2"> 
            <p>This is the second container.</p> 
        </div> 
    </div> 
</body> 
  
</html>

styles.less:

CSS

.container{ 
    display: grid; 
    background-color: whitesmoke; 
    font-family:'Courier New', Courier, monospace; 
    text-align: center; 
    width: 700px; 
    @supports (display: flex) and (font-family: monospace){ 
        display: flex; 
        background-color: whitesmoke; 
        font-family: monospace; 
        text-align: center; 
        .container-1{ 
            background-color: aliceblue; 
            font-size: 0.5rem; 
            text-align: center; 
            padding: 50px 0; 
            width: 20rem; 
            margin: 0.5rem; 
            @supports (color: green) and (font-size: 1.5rem){ 
                background-color: green; 
                font-size: 1.5rem; 
                text-align: center; 
                padding: 50px 0; 
                width: 20rem; 
                color: aliceblue; 
            } 
        } 
        .container-2{ 
            font-size: 0.35rem; 
            background-color: aliceblue; 
            text-align: center; 
            padding: 50px 0; 
            width: 20rem; 
            margin: 0.5rem; 
            @supports (color: green) and (font-size: 1rem){ 
                font-size: 1rem; 
                background-color: green; 
                text-align: center; 
                padding: 50px 0; 
                width: 20rem; 
                color: aliceblue; 
            } 
        } 
    } 
}

Now, to compile the above LESS code to CSS code, run the following command:

lessc style.less styles.css

The compiled CSS file comes to be:

styles.css:

CSS

.container { 
    display: grid; 
    background-color: whitesmoke; 
    font-family: 'Courier New', Courier, monospace; 
    text-align: center; 
    width: 700px; 
} 
  
@supports (display: flex) and (font-family: monospace) { 
    .container { 
        display: flex; 
        background-color: whitesmoke; 
        font-family: monospace; 
        text-align: center; 
    } 
  
    .container .container-1 { 
        background-color: aliceblue; 
        font-size: 0.5rem; 
        text-align: center; 
        padding: 50px 0; 
        width: 20rem; 
        margin: 0.5rem; 
    } 
  
    @supports (color: green) and (font-size: 1.5rem) { 
        .container .container-1 { 
            background-color: green; 
            font-size: 1.5rem; 
            text-align: center; 
            padding: 50px 0; 
            width: 20rem; 
            color: aliceblue; 
        } 
    } 
  
    .container .container-2 { 
        font-size: 0.35rem; 
        background-color: aliceblue; 
        text-align: center; 
        padding: 50px 0; 
        width: 20rem; 
        margin: 0.5rem; 
    } 
  
    @supports (color: green) and (font-size: 1rem) { 
        .container .container-2 { 
            font-size: 1rem; 
            background-color: green; 
            text-align: center; 
            padding: 50px 0; 
            width: 20rem; 
            color: aliceblue; 
        } 
    } 
}