How to combine parent using ampersand (&) with type selectors in SASS ?
Last Updated :
22 Feb, 2021
Ampersand or “&” is a powerful feature of SASS. It enhances the readability of code by using nesting statements, which takes an edge over conventional CSS. We can nest the css class any number of times but most of the times it’s not required.
Syntax:
parent {
some_styling;
& .child_element {
some_stylings;
}
&:pseudo_selector {
some_stylings;
}
}
|
We can use any property of CSS by nesting a child element using the ampersand(&) symbol.
Example 1: SASS / SCSS:
.head {
font-family : 'Courier New' , Courier , monospace ;
text-align : center ;
& .tagline {
text-decoration : underline ;
background-color : rgb ( 29 , 202 , 29 );
}
& .paragraph {
font-size : 20px ;
color : rgb ( 45 , 204 , 204 );
& .read-more{
color : rgb ( 113 , 129 , 129 );
font-size : smaller ;
border : 2px solid black ;
}
}
}
|
Compiled CSS:
CSS
.head {
font-family : 'Courier New' , Courier , monospace ;
text-align : center ;
}
.head .tagline {
text-decoration : underline ;
background-color : #1dca1d ;
}
.head .paragraph {
font-size : 20px ;
color : #2dcccc ;
}
.head .paragraph .read-more {
color : #718181 ;
font-size : smaller ;
border : 2px solid black ;
}
|
Example 2 (using pseudo-selectors) SASS / SCSS:
SASS
a {
text-decoration : none ;
&:hover {
background-color : rgb ( 63 , 168 , 194 );
text-decoration : underline ;
font-weight : bold ;
}
&:visited {
color : rgb ( 157 , 175 , 53 );
}
&:active {
color : rgb ( 77 , 77 , 77 );
}
}
|
Compiled CSS:
CSS
a {
text-decoration : none ;
}
a:hover {
background-color : #3fa8c2 ;
text-decoration : underline ;
font-weight : bold ;
}
a:visited {
color : #9daf35 ;
}
a:active {
color : #4d4d4d ;
}
|
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...