Less.js Nested At-Rules and Bubbling
Last Updated :
24 Jul, 2024
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:
At-rules-and-bubbling
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;
}
}
}
Output:
Reference: https://lesscss.org/#nesting-nested-at-rules-and-bubbling
Similar Reads
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
What are nested rules in LESS ?
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
3 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 @import At-Rules once
Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. This dynamic style sheet language gives CSS more functionality. LESS provides interoperability across browsers. A programming language called CSS pre-processor is
3 min read
Less.js @import At-Rules Inline
Less.js (Leaner Style Sheets) is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. It is a dynamic style sheet language that enhances the working power of CSS. LESS supports cross-browser compatibility. CSS pre-processor is
3 min read
Less.js @import At-Rules multiple
Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. It is a dynamic style sheet language that boosts the functionality of CSS. Cross-browser interoperability is offered via LESS. CSS is improved and compiled for usa
3 min read
Less.js @import At-Rules Reference
Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. With the help of this dynamic style sheet language, CSS is more functional. LESS offers cross-browser compatibility. CSS is improved and compiled using a computer
3 min read
Less.js @import At-Rules
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 can separate and maintain our code
3 min read
Less.js @plugin At-Rules
In this article, we will understand the concepts related to Less.js @plugin At-Rules with different illustrations and examples. Less.js @plugin At-Rules is used to import the JavaScript plugin to add additional functions and features. Basically using the @plugin at rule is similar to an @import for
4 min read
Less.js @import At-Rules optional
Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. This dynamic style sheet language expands the capabilities of CSS. LESS provides cross-browser compatibility. Using a computer language called CSS pre-processor, C
2 min read