Sass Parent Selector
You are Here:
Sass Parent Selector
Use &
(Parent Selector) in an inner selector to re-use the outer selector in more complex ways.
Example
SASS TO CSS CONVERTER
a{
color: black;
font-size: 18px;
&:hover{
color: green;
}
}
Sass Parent Selector with :not
You can also use the parent selector to add css properties which is not for outer selector.
Example
SASS TO CSS CONVERTER
a{
font-size: 17px;
:not(&){
font-size: 18px;
}
}
Seletor Before Parent Selector
Example
SASS TO CSS CONVERTER
a{
margin: 0;
footer & {
margin: 10px;
}
}
Adding Suffixes
You can also use the parent selector to add extra suffixes to the outer selector.
Example
SASS TO CSS CONVERTER
.apple{
color: red;
&-california{
color: IndianRed;
&_los-angeles{
color: green;
}
}
}
Reminder
Hi Developers, we almost covered 99.1% of Sass Tutorials with examples for quick and easy learning.
We are working to cover every Single Concept in Sass.
Please do google search for:
Join Our Channel
Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.
This channel is primarily useful for Full Stack Web Developer.