0

我希望每span一个都是接收扩展的孩子，label同时简化 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 */
  }
}

因为只是扩展 thespan并不也扩展 a span.xxx（尽管我希望它）。

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

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

4

1 回答 1

1

您可能有其他样式规则，它们会覆盖您的@informational扩展中的任何span内容，以使用类。据我所知，这也是...

如果是这种情况，您必须保留您的类选择器，以便它们弥补不太具体的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;
  }

  /* ... */
}
于 2012-07-11T09:15:05.087 回答