Question

我最近在SASS的土地上遇到了一件“事情”。也许你们知道一个技巧或类似的东西来“修复”它。

我有这个班.icon。它包含我的图标的一些基本样式（用于iconfont）。然后可以将这些图标放在我想要的标记中。例如在button中。但是在按钮内部，这个图标需要一些额外的样式。所以我做了以下几点：

.icon {
  // Basic styling
}

button {
  .icon {
    // Additional styling
  }
}

它汇编到这个css：

.icon {
  // Basic styling
}

button .icon {
  // Additional styling
}

到目前为止一切都还可以。但现在我想将.icon扩展到我所有.foo元素中的after-element，如下所示：

.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-element不仅扩展了“root”图标类，还扩展了按钮下的图标类及其所有附加样式。但我不需要那个。我不希望该元素具有额外的样式。它还没有导致问题。但也许这可能会在以后发生。所以我很好奇是否可以从根扩展.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
  }
}

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
}

然后，您将避免生成foo：按钮内的.icon规则。

EDIT2 - 您需要创建一个可以在样式中使用的附加类，因此只定义了一个.icon类（在您生成的grunt-webfont中） CSS）。然后只需在样式中使用.ico类，并扩展％icon占位符，如上所示。

编辑 - 您是否考虑在grunt-webfont生成器中解决此问题？从documentation开始，您似乎可以将输出设置为scss，如下所示：

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

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

Answer 2

我认为这会得到您正在寻找的结果？虽然有些混乱。

方法：制作占位符样式并将其扩展为.icon以开始。

%icon-styles{
  basic: styling;
}

.icon {
  @extend %icon-styles;
}

.foo:after {
  @extend %icon-styles;
}

button .icon {
  @extend %icon-styles;
  additional: styling;
}

汇编成：

.icon, .foo:after, button .icon {
  basic: styling;
}

button .icon {
  additional: styling;
}

Answer 3

您还可以将自定义模板与grunt-webfont一起使用。它会让你对生成的CSS有更多的控制权。

SASS仅从root扩展

3 个答案: