title: Create mixin from @extend class with SASS?
body: <p>I have a class that I can extend: </p>
  
  <pre><code>%h1 {
    font-size: 50px;
  }
  </code></pre>
  
  <p>However im getting too many selectors from doing this. I want to instead create a mixin. I want the CSS output to be:</p>
  
  <pre><code>.something {
   font-size: 50px;
  }
  
  // Some other code 
  
  .something-else {
   font-size: 50px;
  }
  </code></pre>
  
  <p>I can do this with the following but it means having to repeat the rules: </p>
  
  <pre><code>%h1 {
    font-size: 50px;
  }
  @mixin h1 {
    font-size: 50px;
  }
  </code></pre>
  
  <p>This causes an error: </p>
  
  <pre><code>%h1,
  @mixin h1 {
    font-size: 50px;
  }
  </code></pre>
  
  <p>This works but again the selectors get grouped together so it doenst have the benfit of a mixin that I want</p>
  
  <pre><code>%h1 {
    font-size: 50px;
  }
  @mixin h1 {
    @extend %h1;
  }
  </code></pre>