title: SASS extend from root only
body: <p>I recently encountered a.. "thing" in the land of SASS. And maybe you guys know a trick or something alike to "fix" it.</p>
  
  <p>I've got this class <code>.icon</code>. It contains some basic styling for my icons (Used for an iconfont). These icons can then be placed in the markup whereever I want. For example in a <code>button</code>. But inside the button this icon needs some extra styling. So I do the following:</p>
  
  <pre><code>.icon {
    // Basic styling
  }
  
  button {
    .icon {
      // Additional styling
    }
  }
  </code></pre>
  
  <p>It compiles to this css:</p>
  
  <pre><code>.icon {
    // Basic styling
  }
  
  button .icon {
    // Additional styling
  }
  </code></pre>
  
  <p>Everything OK so far. But now I want to extend the <code>.icon</code> to an after-element inside of all my <code>.foo</code> elements like so:</p>
  
  <pre><code>.foo:after {
    @extend .icon;
  }
  </code></pre>
  
  <p>Now it compiles to this css:</p>
  
  <pre><code>.icon, .foo:after { // This is good, exactly what I want
    // Basic styling
  }
  
  button .icon, button .foo:after { // But I don't need the second half of this line
    // Basic Additional
  }
  </code></pre>
  
  <p>Now the foo-element isn't just extending the "root" icon-class but also the icon-class under button and all its additional stylings. But I don't need that. I don't want that element to have that additional styling. It doesn't result in problems yet. But maybe that could happen later. So I was curious if it is possible to extend only the <code>.icon</code> from the root, omitting the nested <code>.icon</code> in the <code>button</code>, and possibly more nested icon-classes in other elements later on.</p>
  
  <p>My first thought was to use an abstact class like <code>%icon</code> and extend from that, but the above mentioned icon-class, and the file that it is placed in, is generated by grunt-webfont. So I can't just change the icon-class styling 'cause its overwritten all the time.</p>
  
  <p>What can I do? Is there some more to the extend function of SASS that I don't know of? Or is there a totally different way?</p>
  
  <p>Thanks for any help.</p>
  
  <p>SOLUTION:</p>
  
  <p>Using all the awesome help and tips I found a way to avoid this problem:
  Grunt-Webfont suggests to use the <code>i-tag</code> to display the icons. Font-Awesome does the same. So, I'm doing exactly that. And I usually don't use it for anything else.
  This allows it to use the <code>i-tag</code> under the <code>button</code> for my extra styling, and not the <code>.icon</code> class. This way the <code>.icon</code> class is used only once in the generated file and then never again.</p>
  
  <pre><code>.icon {
    // Basic styling
  }
  
  button {
    i { // &lt;= Previously '.icon'
      // Additional styling
    }
  }
  </code></pre>