Sass lets you reference the parent selector of a nested rule using the ampersand (&) symbol. The & becomes the parent –– it’s one of Sass’ most useful features!

Pseudo Classes

:hover,:active,:focus, etc.
SCSS

a {
  color: $color-primary;
  text-decoration: none;
  
  &:hover {
    color: $color-secondary;
  }
}

CSS

a {
  color: #278da4;
  text-decoration: none;}
  
  a:hover {
    color: #278da4;
  }

Pseudo Elements

::before,::after, etc.
SCSS

header {
    padding: 2px 0 0;

    &::before {
        content: '';
        display: block;
        background-color: $color-shade;
    }
}

CSS

header {
    padding: 2px 0 0; }

header::before {
        content: '';
        display: block;
        background-color: $color-shade; }

Selector Variations

.btn-info, .btn-default, .btn-callout, etc.
SCSS

btn {
  color: $white;
  
  &-callout {
    color: #fff;
  }
  
  &-info {
    color: $color-info;
  }
}

CSS

btn {
  color: $white;}
  
btn-callout {
  color: #fff; }
  
btn-info {
  color: $color-info; }

Parent Selectors

.intro p, #products li, etc.
SCSS

p {
  font-size: 1.2em;
  
  .intro & {
    font-size: 1.2em;
  }
  
}

CSS

p {
  font-size: 1.2em;}
  
.intro p {
    font-size: 1.2em;
  }

Placing the ampersand after a selector reverses the nesting order.