如何使用 SASS 编写"any span that is a child of label is extended by x, whether it has a class or not"？

Question

我希望作为label的子级的每个span都接收一个扩展，同时简化SASS并消除重复。

例如，我想重写一下：

label > span {
  extend @informational;
}
label > span.info {
  extend @informational;
  /* other info stuff */
}
label > span.error {
  extend @informational;
  /* other error stuff */
}

变成类似的东西：

label {
  span {
    extend @informational;
  }
  span.info {
    /* other info stuff */
    /* this also gets extended, but no explicit extension statement here */
  }
  span.error {
    /* other error stuff */
    /* this also gets extended, but no explicit extension statement here */
  }
}

因为仅仅扩展CCD_ 3并不能同时扩展span.xxx（尽管我希望它能扩展）。

有办法吗？我尝试的所有组合（包括上面的组合）都失败了。

我也尝试过在不使用@extend的情况下，而是在每个相关块中重复informational中的CSS，以达到相同的效果。这使得它成为一个CSS问题（afaics），但如果它可以使用SASS解决，那也没关系。

Answer 1

您可能有其他样式规则，这些规则正在用类覆盖span元素的@informational扩展中的任何内容。就我所见。。。

如果是这种情况，您必须保留类选择器，以便它们弥补不太特定的span选择器，但您可以像这样将它们分组在一起，这样您就不必重复extend @informational;语句（如果您专门只查找子级，而不仅仅是任何嵌套级别的子级，则您还需要使用>）：

label {
  > span, > span.info, > span.error {
    extend @informational;
  }
  > span.info {
    /* other info stuff */
  }
  > span.error {
    /* other error stuff */
  }
}

如果你对span元素有哪些特定类不感兴趣，只要它们有或没有class属性，你可以使用属性选择器作为一种廉价的破解方法：

label {
  > span, > span[class] {
    extend @informational;
  }
  /* ... */
}