SASS extend from root only

Question

I recently encountered a.. "thing" in the land of SASS. And maybe you guys know a trick or something alike to "fix" it.

I've got this class .icon. 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 button. But inside the button this icon needs some extra styling. So I do the following:

.icon {
  // Basic styling
}

button {
  .icon {
    // Additional styling
  }
}

It compiles to this css:

.icon {
  // Basic styling
}

button .icon {
  // Additional styling
}

Everything OK so far. But now I want to extend the .icon to an after-element inside of all my .foo elements like so:

.foo:after {
  @extend .icon;
}

Now it compiles to this css:

.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
}

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 .icon from the root, omitting the nested .icon in the button, and possibly more nested icon-classes in other elements later on.

My first thought was to use an abstact class like %icon 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.

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?

Thanks for any help.

SOLUTION:

Using all the awesome help and tips I found a way to avoid this problem: Grunt-Webfont suggests to use the i-tag 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 i-tag under the button for my extra styling, and not the .icon class. This way the .icon class is used only once in the generated file and then never again.

.icon {
  // Basic styling
}

button {
  i { // <= Previously '.icon'
    // Additional styling
  }
}

Answer 1

Have you tried doing something like this?

.icon {
  //some styles from external (ie: grunt webfont)
  color: red;
}

%icon {
  @extend .icon;
}

button {
  .ico {
    @extend %icon;
    //add some additional styles
  }
}

.foo:after {
  @extend %icon;
  //add some more
}

You would then avoid generating the foo:after rule for the .icon inside the button.

EDIT2 - you'll need to create an additional class which you can use inside your styles, so there's only one .icon class defined (in your grunt-webfont generated css). Then just use the .ico class inside your styles and extend the %icon placeholder like shown above.

EDIT - have you considered solving this problem in your grunt-webfont generator? From the documentation, it seems you can set the output to scss like so:

options: {
      stylesheet: 'scss',
      mixinPrefix: 'mixin-'

Then just use the mixin to define the styles of your desired classes?