SASS расширяется только от root

Недавно я столкнулся с .. "вещью" в стране SASS. И, может быть, вы, ребята, знаете трюк или что-то подобное, чтобы «исправить» это.

У меня есть этот класс .icon. Он содержит некоторые базовые стили для моих иконок (используется для иконочного шрифта). Затем эти значки можно разместить в разметке, где я захочу. Например, в button. Но внутри кнопки этот значок нуждается в дополнительном стиле. Итак, я делаю следующее:

.icon {
  // Basic styling
}

button {
  .icon {
    // Additional styling
  }
}

Он компилируется в этот css:

.icon {
  // Basic styling
}

button .icon {
  // Additional styling
}

Пока все в порядке. Но теперь я хочу расширить .icon до элемента after внутри всех моих элементов .foo следующим образом:

.foo:after {
  @extend .icon;
}

Теперь он компилируется в этот 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
}

Теперь элемент foo не только расширяет «корневой» класс значков, но также класс значков под кнопкой и все его дополнительные стили. Но мне это не нужно. Я не хочу, чтобы этот элемент имел этот дополнительный стиль. Это еще не приводит к проблемам. Но, возможно, это может произойти позже. Поэтому мне было любопытно, возможно ли расширить только .icon из корня, опуская вложенные .icon в button и, возможно, более вложенные классы значков в других элементах позже.

Моей первой мыслью было использовать абстрактный класс, такой как %icon, и расширять его, но вышеупомянутый класс значков и файл, в который он помещен, генерируются grunt-webfont. Поэтому я не могу просто изменить стиль класса значков, потому что он все время перезаписывается.

Что я могу сделать? Есть ли еще какие-то функции расширения SASS, о которых я не знаю? Или есть совсем другой способ?

Спасибо за любую помощь.

РЕШЕНИЕ:

Используя всю замечательную помощь и советы, я нашел способ избежать этой проблемы: Grunt-Webfont предлагает использовать i-tag для отображения значков. Font-Awesome делает то же самое. Итак, я делаю именно это. И я обычно не использую его ни для чего другого. Это позволяет использовать i-tag под button для моего дополнительного стиля, а не класс .icon. Таким образом, класс .icon используется только один раз в сгенерированном файле и больше никогда.

.icon {
  // Basic styling
}

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