How to combine parent using ampersand (&) with type selectors in SASS ?

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;
}