Updated April 1, 2023
Definition of SASS Nesting
Nesting is a merging process of diverse logic structures. By using SASS, we can integrate numerous CSS rules inside one another. We can also use one selector inside another to generate compound selectors by using the multiple selectors.
We must be very careful when using the nesting since excessively nested rules can create ambiguity and it is difficult to maintain. Sass often uses CSS namespaces to provide a shortcut for writing styles. Typically, we have to write individual properties in our style sheet when setting properties in the same namespace. For instance, for element border, we can write namespace once with Sass, and nest its properties.
Syntax of SASS Nesting
The use of nesting styles is very simple which can be used by just enclosing a selector or selectors inside the curly braces of another selector. Nesting would go as multiple levels deep as we want.
Syntax:
.class_name_one{
element_one{
// style code
}
element_two{
// style code
}
.class_name_two{
element_three{
// style code
}
element_four{
// style code
}
}
}In the above syntax, we can see element names, class name is nested in the .class_name_one selector. When you compile the scss, you will have style code in the css as shown below:
.class_name_oneelement_one {
// style code
}
.class_name_oneelement_two{
// style code
}
.class_name_one .class_name_twoelement_three {
// style code
}
.class_name_one .class_name_twoelement_four {
// style code
}Example:
Let’s see a small code snippet of scss as specified below:
.myheading{
h2{
font-size: 15px;
color: red;
}
p {
font-size: 15px;
color: grey;
}
.myclass{
h3{
font-size: 15px;
color: red;
}
p {
font-size: 15px;
color: grey;
}
}
}After compiling the files, you will have the below code in css:
.myheading h2 {
font-size: 15px;
color: red;
}
.myheading p {
font-size: 15px;
color: grey;
}
.myheading .myclass h3 {
font-size: 15px;
color: red;
}
.myheading .myclass p {
font-size: 15px;
color: grey;
}How does Nesting Works in SASS?
Nesting is a shortcut to creating CSS rules. Nesting in SASS works as selector of multiple CSS and combine them within one another instead of writing different CSS lines just to be precise about the style that we want to add to an element, we just nest it up.
Examples to Implement Nesting in SASS
Let’s create an example to make use of the nesting in SASS. Here, we have created an HTML file called example1.html with the below code:
Example #1
Code:
<!DOCTYPE html>
<html>
<head>
<title> SASS Nesting </title>
<link rel="stylesheet" type="text/css" href="sass_nesting.css"/>
</head>
<body>
<h2> Welcome to EDUCBA... </h2>
<nav>
<ul>
<li><a href="#"> Home </a></li>
<li><a href="#"> About Us </a></li>
<li><a href="#"> Contact Us </a></li>
</ul>
</nav>
</body>
</html>Now create a file called sass_nesting.scsswith the below code:
Code:
nav {
ul {
margin: 5;
padding: 5;
list-style: none;
}
li {
display: inline-block;
}
a {
display: block;
padding: 8px 12px;
text-decoration: underline;
font-size: 15px;
}
}Now open the command prompt and run the below command to watch the file and communicates it to SASS and updates the CSS file every time SASS file changes.
sass –watch sass_nesting.scss: sass_nesting.cssNow, execute the file with the above command and it will create the sass_nesting.css file with the below code:
Code:
nav ul {
margin: 5;
padding: 5;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 8px 12px;
text-decoration: underline;
font-size: 15px;
}Output:
Now, execute the html file and open in the browser and you will get the below result:
Example #2
Create an HTML file called example2.html with the below code:
Code:
<!DOCTYPE html>
<html>
<head>
<title> SASS Nesting </title>
<link rel="stylesheet" type="text/css" href="sass_nesting1.css"/>
</head>
<body>
<h2> Welcome to EDUCBA... </h2>
<ul>
<li><a href="#"> Home </a></li>
<li><a href="#"> About Us </a></li>
<li><a href="#"> Services </a>
<ul>
<li> Services One </li>
<li> Services Two </li>
<li> Services Three </li>
</ul>
</li>
<li><a href="#"> Contact Us </a></li>
</ul>
</body>
</html>Now create a file called sass_nesting1.scss with the below code:
Code:
nav {
ul {
margin: 5;
padding: 5;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 8px 15px;
text-decoration: underline;
}
}Execute the file with the above command shown in the previous example and it will create the sass_nesting1.css file with the below code:
Code:
nav ul {
margin: 5;
padding: 5;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 8px 15px;
text-decoration: underline;
}Output:
Now, run the html file and open in the browser and you will get the below result:
Example #3
Create an HTML file called example3.html with the below code:
Code:
<html>
<head>
<title> SASS Nesting </title>
<link rel = "stylesheet" type = "text/css" href = "sass_nesting2.css" />
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div class = "myheading">
<h2> Welcome to EDUCBA...!!! </h2>
<p> It is a leading global provider of skill based education addressing the needs of 500,000+ members across 40+ Countries. </p>
<p> All our training programs are Job oriented skill based programs demanded by the Industry. </p>
<div class = "myclass">
<h3> Why EDUCBA ?</h3>
<p> AteduCBA, it is a matter of pride for us to make job oriented hands-on courses available to anyone, any time and anywhere. Therefore we ensure that you can enroll 24 hours a day, seven days a week, 365 days a year. </p>
</div>
</div>
</body>
</html>Now create a file called sass_nesting2.scss with the below code:
Code:
.myheading{
h2{
font-size: 20px;
color:#FA8072;
}
p{
font-size: 20px;
color:#708090;
}
.myclass{
h3{
font-size: 20px;
color:#FA8072;
}
p{
font-size: 20px;
color:#708090;
}
}
}Execute the file and it will create the sass_nesting2.css file with the below code:
Code:
.myheading h2 {
font-size: 20px;
color: #FA8072;
}
.myheading p {
font-size: 20px;
color: #708090;
}
.myheading .myclass h3 {
font-size: 20px;
color: #FA8072;
}
.myheading .myclass p {
font-size: 20px;
color: #708090;
}Output:
Run the html file and open in the browser and you will get the below result:
Conclusion
So far, we have studied nesting in SASS which can be very useful and makes our CSS organized.The key, therefore, uses nesting in a way that does not impact output and maintenance. Nesting lets you write selectors that imitate your HTML structure. This helps you to build your CSS using the shortcuts.
Recommended Articles
This is a guide to SASS Nesting. Here we also discuss the definition and how does nesting works in sass? along with different examples and its code implementation. You may also have a look at the following articles to learn more –
