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

Question

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

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

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

谢谢。

Answer 1

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

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

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

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

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

Answer 2

Fabrizio的答案是最好的选择，但是如果你真的想要使用额外的标记路线，你可以使用span而不是a并在其中嵌套标签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
}