Parent Class SCSS Technique

by Barry Peterson

HTML

<div class="tnf-eu">
  <div class="burritos">
    <div class="beans"></div>
  </div>
</div>

SCSS

.beans {
  background-color: brown;
  height: 100px;
  width: 100px;
  
  // Allows nesting to keep concerns together increasing readability
  // Compiles to: .tnf-eu .beans { }
  .tnf-eu & {
    background-color: red;
  }
}