<h1>Adding modifier to change box color to pink</h1>

<div class="box"></div>
<div class="box box-pink"></div>
.box {
  display: inline-block;
  width: 10rem;
  height: 10rem;
  margin: 0 5rem;
  background: #333;
  // Adding &- concatenates the parent selector
  &-pink {
    background: pink;
  }
}

// Housekeeping...
body {
  text-align: center;
}
View Compiled
Rerun