Question

我正在学习第一次使用CSS预处理器（LESS），并且在该父类是变量名时尝试定义继承类的类时遇到问题。

这基本上就是我想做的事情：

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

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

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

@fa-css-prefix:       fa;

那么少就不会编译，因为它不能识别.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作为mixins，因为第一个没有定义，第二个不是有效的mixin选择器，幸运的是&:before {content: @fa-var-home}正是{{1}确实。但总的来说，基于.fa-home的解决方案更加优化，因为它可以生成更紧凑的CSS。

LESS：使用变量继承

1 个答案: