less - 使用 Font-awesome 和 LESS 应用语义原则？

Question

我正在尝试按照网页设计的语义原则（不在我的 HTML 标记中放置数十亿个非语义类），使用 LESS，以与 Bootstrap 相同的方式使用 Font-awesome。

似乎不可能：图标定义是这样的：

.@{fa-css-prefix}-home:before { content: @fa-var-home; }

这不是 mixin 定义，而是使用 LESS 变量构建的经典 CSS 规则。

所以，我无法做这种声明：

.meaning-class-name {
    .fa-home;
}

Lessc 抱怨.fa-home未定义。

这是一种避免腐烂我的 HTML 代码的方法吗？有没有办法用 less 将一个类归因于另一个类？

谢谢！

score 2 · Accepted Answer

我发现更好的解决方案是font-awesome/less/icons.less根据这种模式修改和重写声明：

.@{fa-css-prefix}-home { &:before { content: @fa-var-home; } }

它类似于glyphicons.lessBootstrap 使用的。

PS：在 Eclipse 中，这可以使用查找/替换工具快速完成：

寻找：

\.@\{fa-css-prefix\}-([-0-9a-zA-Z]+):before \{ content: @([-0-9a-zA-Z]+); \}

代替：

.@{fa-css-prefix}-$1 { &:before { content: @$2; } }

和

寻找：

\.@\{fa-css-prefix\}-([-0-9a-zA-Z]+):before,

代替：

.@{fa-css-prefix}-$1,

1 回答 1