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

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.


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


  background: gray
  border: 1ps solid black
  border-radius: 5px
    color: red
    border-color: red

SassMeister Gist