大佬教程收集整理的这篇文章主要介绍了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:之前…所以我试过这个:
@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; }
这些都不起作用.有任何想法吗?
@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:之前作为mixins,因为第一个没有定义,第二个不是有效的mixin选择器,幸运的是&:before {Content:@ fa-var-homE}就像.fa-home那样.但总的来说,基于扩展的解决方案更加优化,因为它可以生成更紧凑的CSs.
以上是大佬教程为你收集整理的css – LESS:使用变量继承全部内容,希望文章能够帮你解决css – LESS:使用变量继承所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。