title: Ampersand and mixins in SCSS
body: <p>Searched but can't find an answer.. </p>
  
  <p>I have an element which gets generated (by an external platform) with the following classes: p-button and button.</p>
  
  <p>Now the SCSS is like this:</p>
  
  <pre><code>.p-button {
      &amp;.button {
          margin: 10px;
      }
   }
  </code></pre>
  
  <p>But I want to refactor using mixin includes (this is a big project so there is no other way of making this code better except using mixins). The mixin takes the given selector and applies a . to it. I can't change the mixin, as it is used by many other teams, so I can't pass the ampersand together with the selector. I tried this:</p>
  
  <pre><code>.p-button {
      &amp; {
          @include button-appearance("button") {
             margin: 10px;
          }
      }
   }
  </code></pre>
  
  <p>But that doesn't work (puts a space between it). You can't do this:</p>
  
  <pre><code>.p-button {
      &amp;@include button-appearance("button") {
          margin: 10px;
      }
   }
  </code></pre>
  
  <p>Anyone have a clue?</p>
  
  <p><strong>EDIT: Here is the mixin</strong></p>
  
  <pre><code>@mixin button-appearance(
      $appearance-class, 
      $show, 
      $background-color, 
      $background-image, 
      $background-position) { 
          $sel: $button-selector;
             @if $appearance-class {
                  $sel: $sel + '.' + $appearance-class;
           }
  
  #{$sel} {
      @include normalized-background-image($background-image);
      @include show($show);
      background-color: $background-color;
      background-position: $background-position;
      }
  
      @content;
  }
  </code></pre>
  
  <p><strong>EDIT 2: Here is the $button-selector (I can not edit this in the platform, but maybe overwrite it in my own project?)</strong></p>
  
  <pre><code>$button-class: 'p-button';
  
  $button-selector: '.#{$button-class}';
  </code></pre>