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

parent_selector_reference.md

Sometimes it is necessary to prefix the rule you are engineering with another selector that appears higher up in the DOM. This becomes particularly useful when working with tools like Modernizer.

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

SCSS

.box {
  box-sizing: border-box;
  width: 800px;
  padding: 30px;
  border: 1px solid black;
  .no-boxsizing & {
    width: 738px;
  }
}

Sass

.box
  box-sizing: border-box
  width: 800px
  padding: 30px
  border: 1px solid black
  .no-boxsizing &
    width: 738px

SassMeister Gist

parent_selector_reference.scss

.box {
  box-sizing: border-box;
  width: 800px;
  padding: 30px;
  border: 1px solid black;
  .no-boxsizing & {
    width: 738px;
  }
}