title: Sass mixin with nested ampersand prefix
body: <p>What's the best way to accomplish the ability to use class prefixes using a mixin with placeholder selectors. </p>
  
  <p>To elaborate, say I have a box class that has 3 sizes but I would like to have the option of having it a different color. </p>
  
  <p>My base classes would be:</p>
  
  <pre><code>.box
  .box-md
  .box-sm
  </code></pre>
  
  <p>If I wanted any of the base class boxes to be green, I would like to be able to specify as such: </p>
  
  <pre><code>.box-green
  .box-md-green
  .box-sm-green
  </code></pre>
  
  <p>How would I be able to do so in as DRY a method as possible?</p>
  
  <p>Similar to this answer but using mixins AND placeholder extends: <a href="https://stackoverflow.com/questions/54521586/scss-how-to-extend-nested-ampersand-prefix">SCSS, how to @extend Nested ampersand &quot;prefix&quot;?</a></p>
  
  <p>Here's what I put together so far (which doesn't work)</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="box"&gt;&lt;/div&gt;
  &lt;div class="box-green"&gt;&lt;/div&gt;
  &lt;div class="box-sm"&gt;&lt;/div&gt;
  &lt;div class="box-sm-green"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>CSS (SCSS): </p>
  
  <pre><code>// Main style placholder as mixin
  @mixin box {
    height: 300px;
    width: 300px;
    margin: 20px;
    display: inline-block;
    background-color: blue;
  
    &amp;-green {
      background-color: green;
    }
  }
  
  // Placeholders
  %box {
    @include box;
  }
  
  %small-box {
    @include box;
  
    width: 100px;
    height: 100px;
  }
  
  
  // Class Definition
  .box { @extend %box; }
  
  .box-sm { @extend %small-box; }
  </code></pre>
  
  <p>Pen: <a href="https://codepen.io/Aricha_MW/pen/xxKZWbV" rel="nofollow noreferrer">https://codepen.io/Aricha_MW/pen/xxKZWbV</a></p>