html - SASS 仅从根扩展

Question

我最近在 SASS 领域遇到了一个……“东西”。也许你们知道一个技巧或类似的东西来“修复”它。

我有这个类 .icon。它包含我的图标的一些基本样式(用于 iconfont)。然后可以将这些图标放置在我想要的标记中。例如在 button 中。但是在按钮内部，这个图标需要一些额外的样式。所以我做了以下事情:

.icon {
  // Basic styling
}

button {
  .icon {
    // Additional styling
  }
}

它编译成这个 css:

.icon {
  // Basic styling
}

button .icon {
  // Additional styling
}

到目前为止一切正常。但现在我想将 .icon 扩展到我所有 .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，省略 button 中的嵌套 .icon，并且可能稍后在其他元素中嵌套更多图标类。

我的第一个想法是使用像 %icon 这样的抽象类并从中扩展，但是上面提到的 icon-class 和它所在的文件是由 grunt-webfont 生成的.所以我不能只更改图标类样式，因为它总是被覆盖。

我能做什么？ SASS 的扩展功能还有其他我不知道的吗？还是有完全不同的方式？

感谢您的帮助。

解决方案:

使用所有很棒的帮助和提示，我找到了避免此问题的方法:Grunt-Webfont 建议使用 i-tag 来显示图标。 Font-Awesome 也是如此。所以，我就是这么做的。而且我通常不会将它用于任何其他用途。这允许它使用 button 下的 i-tag 作为我的额外样式，而不是 .icon 类。这样，.icon 类在生成的文件中仅使用一次，之后再也不会使用。

.icon {
  // Basic styling
}

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

Answer 1

你试过这样做吗？

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

然后您将避免为按钮内的 .icon 生成 foo:after 规则。

EDIT2 - 你需要创建一个额外的类，你可以在你的样式中使用它，所以只定义了一个 .icon 类(在你的 grunt-webfont 生成的 css 中)。然后只需在您的样式中使用 .ico 类并扩展 %icon 占位符，如上所示。

编辑 - 您是否考虑过在您的 grunt-webfont 生成器中解决这个问题？来自documentation ，看来您可以像这样将输出设置为 scss:

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

然后只需使用 mixin 来定义所需类的样式？