- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
What are nested rules in LESS?
Less is a CSS preprocessor that extends traditional CSS with additional features such as variables, mixins, and functions. One of the most powerful features of Less is its support for nested rules, which allows us to group related styles and create more organized and readable code.
In this tutorial, we will explore the concept of nested rules in Less and learn how to use them to create more efficient and maintainable CSS code.
Syntax
Users can follow the syntax below to use the nested rules in Less.
.parent {
//styles
.child {
//styles
}
}
In the above syntax, “.parent” is the outer rule, and “.child” is the nested rule.
Benefits of using Nested Rules in LESS
Nested rules in Less provide several benefits, including −
Better Organization
Nested rules allow us to group related styles, making our code more organized and easier to read. By nesting related styles inside their parent selector, we can easily see which styles apply to each element and how they relate. This makes finding and modifying styles easier, especially for larger and more complex projects.
Reduced Repetition
Nested rules can also help reduce the repetitive code we need to write. For example, we have several elements that share the same styles, we can define those styles once and apply them to all the elements using a nested rule. This can help to keep our code DRY (Don't Repeat Yourself) and reduce the chance of errors and inconsistencies.
More Maintainable Code
Using nested rules can also make your code more maintainable over time. If we need to update a style that applies to multiple elements, we can update the nested rule instead of updating each rule separately. This can save time and effort, making it easier to keep our code consistent and up-to-date.
Easier Debugging
Nested rules can also make it easier to debug our code when something goes wrong. Using nested rules to group related styles together, we can quickly narrow down the section of code causing the problem and make targeted fixes without searching through a large and complex stylesheet.
Example
In the example below, we have defined a Less rule named .parent that contains multiple nested rules to style the HTML elements within it.
The top-level rule .parent sets the background color, padding, and text alignment styles for the div element with the class .parent.
Subsequently, the styles defined for h2, p, and span elements are applied based on the defined rules.
As a result, in the output, users can observe that the generated CSS styles are applied to the elements.
Index.html
<html>
<head>
<title> Nested Rules in LESS </title>
<link rel = "stylesheet/less" type = "text/css" href = "style.less">
<style>
.parent {
background-color: #f0f0f0;
padding: 10px;
text-align: justify;
h2 {
font-size: 24px;
color: #20009f;
}
p {
font-size: 16px;
line-height: 1.5;
margin-bottom: 10px;
color: #0450cb;
}
span{
color: red;
}
}
</style>
<script src = "//cdnjs.cloudflare.com/ajax/libs/less.js/3.9.0/less.min.js"></script>
</head>
<body>
<div class = "parent">
<h2> Title </h2>
<p> Lorem ipsum dolor, sit amet <span>Lorem ipsum dolor sit. </span> consectetur adipisicing elit. Sed, ad <br/>
Lorem ipsum dolor, sit amet <span> Lorem ipsum dolor sit. </span> consectetur adipisicing elit. Sed, ad </p>
</div>
</body>
</html>
Example
In the example below, we define a ".food-card" Less rule that contains several nested rules to style the elements inside it. After that, the styles defined for h2, img, p, .price, and .button elements are applied according to the defined rules.
The nested rule for ".button: hover" also provides additional styles to the button element on hover.
In the output, users can observe that the ".food-card" div is styled with a border, padding, and background color. The heading, image, paragraph, price, and button elements are styled with different font sizes, colors, and margins. The button element also has a hover effect defined through the nested rule.
index.html
<html>
<head>
<title> LESS Example </title>
<link rel = "stylesheet/less" type = "text/css" href = "style.less">
<style>
.food-card {
font-family: Arial, Helvetica, sans-serif;
max-width: 300px;
border: 1px solid #ccc;
padding: 10px;
background-color: #fff;
margin: 2rem auto;
h2 {
font-size: 18px;
margin-top: 0;
margin-bottom: 5px;
color: #333;
}
img {
display: block;
max-width: 100%;
height: auto;
margin: 0 auto;
}
p {
font-size: 14px;
line-height: 1.5;
color: #666;
margin: 0;
}
.price {
font-size: 16px;
color: #ff4b4b;
margin-top: 10px;
}
.button {
display: inline-block;
background-color: #ff4b4b;
color: #fff;
padding: 8px 12px;
border-radius: 5px;
text-decoration: none;
margin-top: 10px;
&:hover {
background-color: #ffffff;
color: #ff4b4b;
border: 1px solid #ff4b4b;
}
}
}
</style>
<script src = "//cdnjs.cloudflare.com/ajax/libs/less.js/3.9.0/less.min.js"> </script>
</head>
<body>
<div class = "food-card">
<h2>Chicken Burger</h2>
<p> Our delicious chicken burger is made with fresh ingredients and served on a sesame seed bun. </p>
<p class = "price"> $8.99 </p>
<a href = "#" class = "button"> Order Now </a>
</div>
</body>
</html>
Conclusion
Users learned that nested rules in Less are a powerful feature that can improve CSS code's organization, efficiency, and maintainability. By using nested rules, users can group related styles, reduce repetition, and make their code more maintainable and easier to debug.
By understanding nested rules, developers can write more concise and effective code to style their HTML elements.
97 Views
