title: how to use sass mixin to append a set of classes
body: <p>I need help in creating a sass mixin.</p>
  
  <p>I have a class called vertical3, which stacks the same same image above each other 3 times. I also get a property call overlap which can range from -2 to +1 for which I have defined classes below. these overlap classes sit on the same level as vertical 3.</p>
  
  <p>As you can see they only adjust margin of the first two items. I would like to define a sass mixin for this.</p>
  
  <pre><code>&lt;div class="vertical3 overlap-3"&gt;
      &lt;img&gt;
      &lt;img&gt;
      &lt;img&gt;
  &lt;/div&gt;
  
  
  .vertical3 {
      flex-flow: column;
      flex-direction: column-reverse;
      justify-content: flex-start;
      align-items: center;
      img {
          max-height: 27%;
      }
  }
  
  .vertical3.overlap-2 {
      img:first-child {
          margin-top: -5%;
      }
  
      img:nth-child(2) {
          margin-top: -5%;
      }
  }
  .vertical3.overlap-1 {
      img:first-child {
          margin-top: -2.5%;
      }
  
      img:nth-child(2) {
          margin-top: -2.5%;
      }
  }
  .vertical3.overlap2 {
      img:first-child {
          margin-top: 5%;
      }
  
      img:nth-child(2) {
          margin-top: 5%;
      }
  }
  .vertical3.overlap1 {
      img:first-child {
          margin-top: 2.5%;
      }
  
      img:nth-child(2) {
          margin-top: 2.5%;
      }
  }
  </code></pre>
  
  <p>I would like to accomplish something like this</p>
  
  <pre><code>.vertical3 {
      flex-flow: column;
      flex-direction: column-reverse;
      justify-content: flex-start;
      align-items: center;
      img {
          max-height: 27%;
      }
      @inlcude overlap(2.5%)
  }
  
  @mixin overlap($base){
      adding overlap-2 to overlap2 as classes
  }
  </code></pre>