html - LESS:在 :before 中使用 font-awesome

Question

我想要一个带有自定义字体、颜色和左侧元素符号的页眉的 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 人员更改某些内容。有没有更优雅的解决方案？

Answer 1

你不能真正在 Less 中使用内插选择器来混合...所以带有内插选择器的规则不能包含在其他规则集中。在这里查看答案:

LESS mixin a variable class name

但在您的情况下，如果您不对这些 less 文件执行任何其他特殊操作，则您可以导入已编译的 css 作为 less 而不是 less 文件。只需使用:

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

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

但是，这样您就不会导入字符变量，您可以单独导入，但您也可以直接使用 content: "\f140";(在.fa-bullseye:before)

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

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

希望这对您有所帮助。

---

更新:

从 LESS >= 1.6 开始，带有内插选择器的规则可以作为混合访问。因此，将 .fa 作为 mixin 调用，就像您在上面的示例中所做的那样，现在应该可以完美地工作了。