Referencing the Parent Selector in Sass

In addition to simple nesting in Sass, you can also reference the parent selector using the & character:

.main a {
  background-color: rgba(236,198,48,0.2);
  transition: background-color .2s ease-out;

  &:hover {
    background-color: rgba(236,198,48,0.8);
  }
}

The above, once compiled to CSS, will yield the following:

.main a {
  background-color: rgba(236, 198, 48, 0.2);
  transition: background-color .2s ease-out;
}
.main a:hover {
  background-color: rgba(236, 198, 48, 0.8);
}

Here’s another example for ya:

button {
  background-color: blue;

  &.success {
    background-color: green;
  }

  &.warning {
    background-color: yellow;
  }
}

Which will produce the following:

button {
  background-color: blue;
}
button.success {
  background-color: green;
}
button.warning {
  background-color: yellow;
}