title: Referencing direct parent with & and not absolute parent
body: <p><strong>For this SASS:</strong></p>
  
  <pre><code>@mixin sameHeight($multiplier){
      height:367px + 21px * $multiplier;
  }
  
  .page{
    .inner{
      @for $i from 1 through 3{
         .compare-#{$i} &amp;{ @include sameHeight($i); };
      }
    }
  }
  </code></pre>
  
  <p><strong>I get this:</strong></p>
  
  <pre><code>.compare-1 .page .inner {
    height: 215px;
  }
  .compare-2 .page .inner {
    height: 250px;
  }
  .compare-3 .page .inner {
    height: 285px;
  }
  </code></pre>
  
  <h2>But I would like this:</h2>
  
  <pre><code>.page .compare-1 .inner {
    height: 215px;
  }
  .page .compare-2 .inner {
    height: 250px;
  }
  .page .compare-3 .inner {
    height: 285px;
  }
  </code></pre>
  
  <p>Basically the <code>&amp;</code> is just adding the <code>compare</code> class to the absolute top-most parent, which is not something I want to happen.</p>