LESS：在 :before 中使用 font-awesome

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

我有这个html：<h1 class="bulleted-header">Hello</h1>我想用 LESS 写这样的东西：

.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
}

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

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

您不能真正在 Less 中使用插值选择器进行混合...因此具有插值选择器的规则不能包含在其他规则集中。请参阅此处的答案：

LESS mixin 变量类名

但就你而言，你可以导入编译好的css如果您没有对这些 less 文件执行任何其他特殊操作，请使用 less 而不是 less 文件。只需使用：

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

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

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

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

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

希望这可以帮助。

Update:

As of 小于 >= 1.6带有内插选择器的规则可以作为 mixin 访问。所以打电话.fa作为一个混合，就像你在上面的例子中所做的那样，现在应该可以完美地工作。