Skip to content
Related Articles

Related Articles

How to combine parent using ampersand (&) with type selectors in SASS ?
  • Difficulty Level : Easy
  • 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;
    }
      
    /* :hover, :active, :visited etc.. */
    &: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;
}
My Personal Notes arrow_drop_up
Recommended Articles
Page :