You may have noticed that when you write HTML, it has clear nested and visual hierarchy but CSS does not have. SCSS Nesting will let your CSS selector in a way that it follows same visual hierarchy of HTML.Code Structure:
nav{
ul{
margin: 0;
padding: 0;
list-style: none;
}
li{
float: inline-block;
}
a{
display: block;
padding: 5px 15px;
text-decoration: none;
}
}
Result: nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 5px 15px;
text-decoration: none;
}