我正在使用Font Awesome 4.0.0,并希望在LESS中执行以下操作:
.btn-github { .btn; .btn-primary; margin-left: 3em; i { .@{fa-css-prefix}; .@{fa-css-prefix}-github; .@{fa-css-prefix}-lg; margin-right: 1em; } }
不会与错误一起编译:
ParseError: Unrecognised input in - on line ...
有可能做到这一点吗?当然,这对我来说将是一个美丽的按钮。
您尝试执行的操作至少有2个问题( 对于LESS > = 1.6,请参见update bellow):
1)不幸的是,无法使用选择器插值来调用mixin。
通过选择器插值,LESS期望构造为以下格式:
.@{selector-string} { property:value; }
(插值选择器还可以在插值之前或之后具有一些静态字符串)
所以
.@{selector-string};
是 无法识别的 由LESS编译器。
2)具有插值选择器的规则集将直接打印到CSS输出,并且不存在可以在LESS运行中重用的mixin
例如:
@foo: test; .@{foo} { length: 20px; } .bar { .test; }
将返回:
Name error: .test is undefined .bar { .test;}
在此处查看更多信息:少CSS:将生成的。@{name}类重用为mixin
对于您的问题,可能的解决方案是将字体真棒规则重新定义为某种可重用的混合(不使用插值)。像这样:
@fa-var-github: "\f09b"; .fa-mixin() { display: inline-block; font-family: FontAwesome; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .fa-mixin-lg() { font-size: (4em / 3); line-height: (3em / 4); vertical-align: -15%; } .fa-mixin-icon(@icon){ @var: "fa-var-@{icon}"; &:before { content: @@var; } } i { .fa-mixin; .fa-mixin-lg; .fa-mixin-icon(github); }
如果您确实不需要变量,而只想包含规则,则最好的方法是 导入 FontAwesome 的已编译CSS
@import (less) 'font-awesome.css';
然后您可以使用LESS mixins之类的CSS规则,也可以根据需要扩展其选择器,它应该可以完美地工作。
从 LESS > = 1.6起,可以将带有插值选择器的规则作为mixins访问…因此,上面的#2限制表不再适用(但是您仍然不能通过插值动态调用mixin)。因此,您可以font-awesome.less像这样从导入的文件中简单地调用LESS mixins和变量:
font-awesome.less
i { .fa; .fa-lg; &:before{ content: @fa-var-github; } }