Nesting selectors in SCSS allows you to write cleaner and more structured styles by placing related CSS rules inside one another. Instead of repeating parent class names, you can nest child selectors directly within the parent, making the code more readable. This approach helps reflect the HTML structure and reduces redundancy in your stylesheets. You can also use the & symbol to reference the parent selector for pseudo-classes like :hover or modifiers. Overall, nesting improves organization and makes your SCSS code easier to maintain.
What is Nesting in SCSS?
Nesting allows you to write CSS in a hierarchical structure that mirrors your HTML. It makes styles more readable and organized.
Example:
.nav {
background: #333;
ul {
list-style: none;
}
li {
display: inline-block;
}
}
Nesting Child Elements
You can nest child elements inside a parent selector instead of writing long CSS selectors.
Example:
.card {
padding: 20px;
h2 {
font-size: 20px;
}
p {
color: gray;
}
}
Using & (Parent Selector)
The & symbol refers to the parent selector. It is useful for pseudo-classes, modifiers, and states like :hover.
Example:
.button {
background: blue;
color: white;
&:hover {
background: darkblue;
}
}
Nesting Multiple Levels
SCSS allows multiple levels of nesting, but it should be used carefully to avoid overly complex CSS.
Example:
.menu {
ul {
li {
a {
text-decoration: none;
color: black;
}
}
}
}
Best Practices for Nesting
Avoid deep nesting (more than 3–4 levels) to keep your code clean and maintainable. Use meaningful structure and avoid overcomplication.
Example:
.nav {
ul {
li {
margin: 10px;
a {
color: blue;
&:hover {
color: red;
}
}
}
}
}
