Nesting is combining different logic structures. Using SASS, we can combine multiple CSS rules within one another. If you are using multiple selectors, then you can use one selector inside another to create compound selectors.

Sass lets you nest CSS selectors in the same way as HTML.
Look at an example of some Sass code for a site’s navigation:
SCSS Syntax:
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
display: inline-block;
}
a {
display: block;
padding: 8px 14px;
text-decoration: none;
}
}

nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 8px 14px;
text-decoration: none;
}
You can nest properties in Sass, it is cleaner and easier to read than standard CSS.
Sass Nested Properties
Many CSS properties have the same prefix, like font-family, font-size and font-weight or text-align, text-transform and text-overflow.
With Sass you can write them as nested properties:
SCSS Syntax:
font: {
family: Helvetica, sans-serif;
size: 20px;
weight: bold;
}
text: {
align: center;
transform: uppercase;
overflow: hidden;
}
The Sass transpiler will convert the above to normal CSS:
font-family: Helvetica, sans-serif;
font-size: 20px;
font-weight: bold;
text-align: center;
text-transform: uppercase;
text-overflow: hidden;
Enjoy coding!
Read also: