Question

我想要一个带有自定义字体，颜色和左侧子弹的标题的CSS选择器。所以我希望我的标题使用我的自定义字体，而:before伪元素使用font-awesome。所以我希望我的:before拥有.fa类，而整个元素没有这个类。

我有这个html：<h1 class="bulleted-header">Hello</h1>而且我想写一些这样的东西：

.bulleted-header {
    color: #61cbe6;
    font: 16px 'ds_goose', sans-serif;
    &:before {
        content: @fa-var-bullseye; // font-awesome's bullet icon
        .fa; // calling font-awesome's class. DOESN'T COMPILE
    }
}

问题是.fa类在font-awesome LESS源中声明如此：.@{fa-css-prefix} { ... }，因此上面的代码不能编译。我试图像这样重用.fa代码：

&:before {
    content: @fa-var-bullseye; // font-awesome's bullet icon
    .@{fa-css-prefix}; // DOESN'T COMPILE
}

并且像这样：

&:before:extend(.@{fa-css-prefix}) { // compiles but no effect
    content: @fa-var-bullseye; // font-awesome's bullet icon
}

我知道我可以像<h1 class="bulleted-header"><span class = "fa fa-bullseye"></span>Hello</h1>一样更改我的html，而不是使用:before，但将所有这些项目符号保留在CSS中更合乎逻辑。

我最后只是将.fa的内容复制粘贴到我的:before中，但是这种方法有问题，因为现在我必须自己维护这段代码以防FA人改变某些东西。还有更优雅的解决方案吗？

Answer 1

你不能在Less ...中真正使用插值选择器用于mixin，因此带插值选择器的规则不能包含在其他规则集中。见这里的答案：

LESS mixin a variable class name

但是在你的情况下你可以导入已编译的css 而不是较少的文件，如果你没有用这些较少的文件做任何其他特殊的东西。只需使用：

@import (less) 'font-awesome.css';

然后你就可以使用.fa作为mixin，就像你想要的那样。

但是，这样您就不会导入可以单独执行的字符变量，而是直接使用content: "\f140";（在.fa-bullseye:before中使用它的方式）

或者只是扩展使用您的选择器从font-awesome.css导入的选择器，如下所示：

.bulleted-header {
    color: #61cbe6;
    font: 16px 'ds_goose', sans-serif;
    &:extend(.fa, .fa-bullseye all);
}

希望这有帮助。

更新

从 LESS＆gt; = 1.6 带插值选择器的规则可以作为mixins访问。因此，将.fa称为mixin就像在上面的示例中一样，现在应该可以正常工作。

Answer 2

使用SASS实现时遇到了同样的问题。我更改了.@{fa-css-prefix}代码，因此它.@{fa-css-prefix}:before，这对我来说非常好。您仍然需要扩展基本元素，但字体样式仅适用于：before

我其实想知道为什么他们这样做了。我认为他们的方法是每个图标都有单个dom元素（比如他们使用的<i>），按钮前面没有图标，链接，列表项或者你通常会做的任何事情。但据我记得，这是最后一个fontawesome版本中的情况。

少：在以前使用font-awesome：之前

2 个答案:

更新