Sass 检查元素是否包含另一个

【问题标题】：Sass check if element contains another oneSass 检查元素是否包含另一个
【发布时间】：2014-02-03 17:57:08
【问题描述】：

我正在尝试制作带有图标的按钮。对于我想使用<i> 标签的图标。例如，如果我想要一个开头带有星形图标的按钮，我想写一些东西：

<a class="button" href="#"><i class="star"></i><span>Button</span></a>

问题是我的 by 按钮可能没有图标。 Sass有什么方法可以检查这个吗？如果没有，最好的方法是什么？

谢谢。

【问题讨论】：

标签： html css sass

【解决方案1】：

如果您需要为链接提供不同的样式，也许您可以避免使用额外的标记来设置样式（这是一种不好的做法）并将类（例如star）分配给链接

<a class="button star" href="#"><span>Button</span></a>

并将图标作为伪元素的内容，例如

.button.star:before {
    content: url(...) // or some iconic font (e.g. fontello)
}

这样做，您可以为带图标和不带图标的按钮设置不同的样式。

【讨论】：

【解决方案2】：

Fabrizio 的答案是最好的选择，但如果你真的想使用额外的标记路线，你可以使用 span 而不是 an 并将标签 span 嵌套在其中：

<a class="button" href="#"><span class="star"><span>Button</span></span></a>

并调整 CSS

.button .star {
    // Icon styles
}

.button span span {
    // Styles for the link when an icon is present
}

【讨论】：