LESS：使用变量的继承

Question

我是第一次学习使用 CSS 预处理器 (LESS)，但在尝试定义一个继承类的类时遇到了麻烦，而该类的父类是变量名。

这基本上是我想做的：

@import "font-awesome/font-awesome.less"

.icon-application-home{
    .fa .fa-home;
}

但是因为 fa 在 Font Awesome 中是这样定义的：

@fa-css-prefix:       fa;

那么less 将无法编译，因为它无法识别.fa。所以我尝试了这个：

@import "font-awesome/font-awesome.less"

.icon-application-home{
    .@{fa-css-prefix} .@{fa-css-prefix}-home;
}

但是，这也不起作用。有什么解决方法吗？我可以在这里做什么？

编辑

我在这里找到了一半的答案：

Missing Font-Awesome.less variables in my .less file after importing

如果我执行以下操作，这（部分）有效：

@import (less) "../font-awesome.css";

.icon-home {
    .fa;
}

但是，我注意到.fa-home 不存在...只有.fa-home:before...所以我尝试了这个：

@import (less) "../font-awesome.css";

.icon-home {
    .fa;
    .fa-home:before;
}

和

@import (less) "../font-awesome.css";

    .icon-home {
        .fa;
    }
    .icon-home:before {
        .fa-home:before;
    }

这些都不起作用。有什么想法吗？

Answer 1

假设您使用包含 Less 1.4.2 的 WE2012，最简单的解决方案是：

@import (less) "../font-awesome.css";

.icon-application-home {
    &:extend(.fa, .fa-home all);
}

或者：

@import (less) "../font-awesome.css";

.icon-application-home
    :extend(.fa, .fa-home all) {

}   

阅读extend documentation 了解有关这些东西如何工作的详细信息。

---

如果您升级到包含 Less 1.6.x 的 IDE/编译器，您将能够：

@import ".../font-awesome.less"

.icon-application-home {
    .fa;
    &:before {content: @fa-var-home}
}

你仍然不能使用.fa-home 或.fa-home:before 作为mixin，因为第一个没有定义，第二个不是有效的mixin 选择器，幸运的是&:before {content: @fa-var-home} 正是.fa-home 所做的。 但总的来说，基于extend 的解决方案更优化，因为它产生更紧凑的 CSS。