Sass 101 - A newb's guide: parent selector reference

parent_selector_reference.md

Sometimes it is necessary to extend selectors within a rule. For example, you may need extend the styling of a button to designate a fail state.

In this case, you can explicitly specify where the parent selector should be inserted using the & character.

SCSS

button {
  background: gray;
  border: 1ps solid black;
  border-radius: 5px;
  &.fail {
    color: red;
    border-color: red;
  }
}

Sass

button
  background: gray
  border: 1ps solid black
  border-radius: 5px
  &.fail
    color: red
    border-color: red

SassMeister Gist

parent_selector_reference.scss

button {
  background: gray;
  border: 1ps solid black;
  border-radius: 5px;
  &.fail {
    color: red;
    border-color: red;
  }
}