Basics of Nesting
Nesting is one of the most popular features of SCSS.
It allows developers to write CSS inside another selector, creating a cleaner and more organized structure.
Why Nesting is Useful?
- Cleaner code structure
- Better readability
- Component-based styling
- Easier maintenance
- Less repeated selectors
Without Nesting (Normal CSS)
[code theme="dark"]
.card{
padding:20px;
}
.card h2{
font-size:24px;
}
.card p{
color:gray;
}
[/code]
The parent selector is repeated multiple times.
With SCSS Nesting
[code theme="dark"]
.card{
padding:20px;
h2{
font-size:24px;
}
p{
color:gray;
}
}
[/code]
Compiled CSS Output
[code theme="dark"]
.card{
padding:20px;
}
.card h2{
font-size:24px;
}
.card p{
color:gray;
}
[/code]
How Nesting Works?
SCSS automatically combines child selectors with the parent selector.
Real Component Example
[code theme="dark"]
.navbar{
background:#222;
.logo{
color:white;
}
.menu{display:flex;
gap:20px;
a{
color:white;
text-decoration:none;
}}
}
[/code]
Compiled CSS
[code theme="dark"]
.navbar{
background:#222;
}
.navbar .logo{
color:white;
}
.navbar .menu{
display:flex;
gap:20px;
}
.navbar .menu a{
color:white;
text-decoration:none;
}
[/code]
Pseudo Classes with Nesting
Nesting works very well with hover, focus, active, etc.
Example
[code theme="dark"]
.button{
background:blue;
&:hover{
background:red;
}
}
[/code]
Compiled CSS
[code theme="dark"]
.button{
background:blue;
}
.button:hover{
background:red;
}
[/code]
What is "&" in SCSS?
& represents the current parent selector.
Example
[code theme="dark"]
.card{
&-title{
font-size:24px;
}
}
[/code]
Compiled CSS
[code theme="dark"]
.card-title{
font-size:24px;
}
[/code]
BEM Style Example
Nesting is commonly used with BEM naming.
[code theme="dark"]
.card{
&__title{
font-size:24px;
}
&__content{
padding:20px;
}
}
[/code]
Compiled Output
[code theme="dark"]
.card__title{
font-size:24px;
}
.card__content{
padding:20px;
}
[/code]
Nested Media Queries
SCSS allows media queries inside components.
[code theme="dark"]
.card{
padding:20px;
@media(max-width:768px){
padding:10px;
}
}
[/code]
Compiled CSS
[code theme="dark"]
.card{
padding:20px;
}
@media(max-width:768px){
.card{
padding:10px;
}
}
[/code]
Nested Pseudo Elements
[code theme="dark"]
.title{
&::after{
content:"";
display:block;
}
}
[/code]
Nested States Example
[code theme="dark"]
.input{
border:1px solid gray;
&:focus{
border-color:blue;
}
}
[/code]
Multi-Level Nesting
[code theme="dark"]
.sidebar{
.menu{li{
a{
color:black;
}
}}
}
[/code]
Compiled CSS
[code theme="dark"]
.sidebar .menu li a{
color:black;
}
[/code]
Problem with Deep Nesting
Too much nesting creates overly complex CSS.
Bad Example
[code theme="dark"]
.main{
.wrapper{.container{
.card{
.content{
.title{
color:red;
}
}
}
}}
}
[/code]
Why Deep Nesting is Bad?
- Difficult debugging
- Very long selectors
- Poor maintainability
- High CSS specificity
- Hard to override styles
Better Approach
[code theme="dark"]
.card-title{
color:red;
}
[/code]
Recommended Nesting Depth
Usually keep nesting:
Nesting with Flexbox Example
[code theme="dark"]
.navbar{
display:flex;
justify-content:space-between;
.menu{display:flex;
gap:20px;
a{
color:black;
&:hover{
color:blue;
}
}}
}
[/code]
Nesting with Responsive Design
[code theme="dark"]
.card{
width:400px;
@media(max-width:768px){
width:100%;
}
}
[/code]
Nesting in Component-Based Development
Nesting works very well in:
- React components
- Vue components
- Angular components
- Modular SCSS architecture
Common Use Cases
- Buttons
- Cards
- Navbar
- Dropdowns
- Forms
- Modals
Best Practices
- Keep nesting shallow
- Avoid very long selectors
- Use component-based structure
- Use "&" smartly
- Prefer readability over complexity
Quick Summary
- Nesting allows writing selectors inside selectors
- & represents the parent selector
- Improves readability and structure
- Great for component-based styling
- Avoid deep nesting for maintainability
Nesting is one of the most useful SCSS features for writing clean and organized CSS.