LESS：using font-awesome in：before [英] LESS: using font-awesome in :before

问题描述

我想有一个CSS选择器的标题，自定义字体，颜色和左边的项目符号。所以我想要我的标题使用我的自定义字体，它的：之前伪元素使用字体awesome。所以我想让我的：before 有 .fa 类，而整个元素没有这个类。

I want to have a CSS selector for a header with custom font, color and a bullet to the left. So I want my header to use my custom font, and it's :before pseudo-element to use font-awesome. So I would like my :before to have the .fa class, while the whole element doesn't have this class.

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

I have this html: <h1 class="bulleted-header">Hello</h1> And I would like to write something like this in 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 代码，如下所示：

The problem is that .fa class is declared like this in font-awesome LESS sources: .@{fa-css-prefix} { ... }, so the code above doesn't compile. I tried to reuse the .fa code like this:

&: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中。

I know I can just change my html like this <h1 class="bulleted-header"><span class = "fa fa-bullseye"></span>Hello</h1> and not to use :before at all, but it's more logical to keep all this bullets thing in CSS.

我最后只是将 .fa 的内容复制粘贴到我的：之前，但这种方法有错误因为现在我必须保持这个代码自己，以防FA家伙改变的东西。有没有更优雅的解决方案？

I ended up just copy-pasting the content of .fa into my :before, but there is something wrong in this approach because now I have to maintain this code myself in case FA guys change something. Are there any more elegant solutions?

推荐答案

你不能真正使用插入选择器混合在Less ...所以规则内插选择器不能包含在其他规则集中。请参阅这里的解答：

You can not really use interpolated selectors for mixins in Less ... so the rules with interpolated selectors can not be included in other rulesets. See answer here:

缺少混合变量类名称

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

But in your case you could just import the compiled css as less instead of the less files, if you are not doing any other special stuff with these less files. Simply by using:

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

然后，您可以使用 .fa mixin，就像你想要的。

Then you can use .fa as a mixin, exactly like you wanted.

但是，这种方式你不导入字符变量，你可以单独做，而是你也可以只使用内容：\f140; （ .fa-bullseye：之前）

However, this way you don't import the character variables, which you could do separately, but instead you could also just use content: "\f140"; directly (the way it's used in .fa-bullseye:before)

或者，您也可以使用选择器扩展从 font-awesome.css 导入的选择器：

Or alternatively just extend the selectors imported from font-awesome.css with your selector, like so:

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

希望这有帮助。

从 LESS> = 1.6 起，内插选择器的规则可以作为mixin访问。因此，调用 .fa 作为一个mixin，就像你在上面的例子中，现在应该完美。

As of LESS >= 1.6 rules with interpolated selectors can be accessed as mixins. So calling .fa as a mixin, like you do in your above example, should now work perfectly.

这篇关于LESS：using font-awesome in：before的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！