Stylus：当一个元素有一个额外的类时，我怎样才能改变它的颜色？

Posted 2023-02-23

【中文标题】Stylus：当一个元素有一个额外的类时，我怎样才能改变它的颜色？

【英文标题】：Stylus: How can I change the color on an element when it has an additional class?

【发布时间】：2014-10-11 18:34:24

【问题描述】：

我们正在使用 icomoon，以便我们的图标是字体，我们可以轻松更改它们的颜色。但是，我在设置图标样式时遇到问题，因此默认颜色为lightgrey，并且当它具有primary 类时，其颜色为yelloworange。现在，我的样式表如下所示：

i
  &.icon-star.primary
    color yelloworange
  &.icon-star
    color lightgrey

这些样式中的每一个都可以独立工作。

但是，当我同时拥有它们时，所有图标都是lightgrey，而带有primary 类的图标不是yelloworange。 （我检查了元素，它们确实有正确的类名）。

任何帮助将不胜感激。谢谢！

【问题讨论】：

嗯，显而易见的答案是反转级联，如果有的话添加！重要

@Fabio: .icon-star.primary 比 .icon-star 更具体，所以顺序无关紧要。 （而!important 并不是真正的解决方案。）

@Fabio，我也有同样的想法，但扭转它们没有任何效果。我有一个使用 lightgrey 样式的另一个类的快速而肮脏的解决方案，但我很想知道是否有任何方法可以仅使用 primary 标记。

这感觉不对劲……那是 sass 语法吗？你能在css中发布sass编译成的内容吗？我认为这可能就是答案所在

【参考方案1】：

这些样式中的每一种都可以单独使用。

我对此表示怀疑，因为yelloworange isn’t a CSS colour。如果您查看 Stylus 的渲染 CSS，您会发现它也无法识别颜色（Stylus 会将其转换为十六进制表示）。

如果您确实将 yelloworange 定义为自定义值，请确保您仍然这样做！

【讨论】：

他正在通过 CSS 预处理器定义颜色名称

@Fabio：问题中是否提到过？

不，但很明显。无论如何，只是提到为什么他可以正确使用该代码，我并没有那么紧张。现在我看到了你的另一条评论，所以我可以看到你很开心，玩得开心，我出去了。

@Fabio 仍然应该在问题中添加或者至少应该添加一个标签。 “我出局”的补充也无助于您的陈述。但是让我们远离元数据。

@spinlock：我正在回答这个问题。如果它不适合你，你可以这么说（你仍然没有）。如果您定义了yelloworange，请注意问题中的内容，并提供我们可以用来重现该问题的最少代码量。我不确定从哪里得到了我在争论的印象。 Fabio 似乎被我赶走了，他指出他评论中建议的修复不应该产生影响（你已经确认），这几乎不是我的错。如果你对寻求帮助不感兴趣，我也可以随时离开。

【参考方案2】：

我想出的解决方法是对lightgrey 星使用standard 类，对yelloworange 星使用primary 类。它看起来不像只向主要星星添加一个类那么优雅，但它确实有效。

    i
      &.icon-star.primary
        color yelloworange
      &.icon-star.standard
        color lightgrey