大佬教程收集整理的这篇文章主要介绍了css – 如何使用LESS动态生成整个类并将其连接到其父选择器,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
减:
.test(@Name) { (~".sm-@{name}") { BACkground: ~"url(../images/icons/sm/@{name}-16x16.png)"; } }
我可以调用它(.test(“facebook”))来生成这样的东西:
CSS:
.sm-facebook { BACkground: url(../images/icons/sm/facebook-16x16.png); }
但是,我无法使用通常的& amp;将这个生成的类定义连接到父选择器.操作符.我期待
减:
ul { li { &.test("facebook"); } }
生成
CSS:
ul li.sm-facebook { BACkground: url(../images/icons/sm/facebook-16x16.png); }
但我得到一个解析错误.
我怎样才能做到这一点?
在初次回答的时候,我还没有解决是否有办法在LESS 1.3.3中做到这一点(但后来做了,见下面的更新).我发现当前的LESS 1.4(beta)可以通过这种方式将连接放在mixin中来实现它(请注意参数缺少引号):
减
.test(@Name) { &.sm-@{name} { BACkground: ~"url(../images/icons/sm/@{name}-16x16.png)"; } } ul{ li { .test(facebook); } }
CSS输出
ul li.sm-facebook { BACkground: url(../images/icons/sm/facebook-16x16.png); }
如果你需要灵活性来连接或不连接,你可以像这样嵌套mixin(这个默认为attach):
.test(@name,@attach: 1) { .attach(1) { &.sm-@{name} { BACkground: ~"url(../images/icons/sm/@{name}-16x16.png)"; } } .attach(0) { .sm-@{name} { BACkground: ~"url(../images/icons/sm/@{name}-16x16.png)"; } } .attach(@attach); }
然后像这样使用它.test(facebook);连接,这个.test(facebook,0);将其分隔为子(或独立)类.
更新:无需1.3.1至1.3.3答案
首先更改名称,以便字符串评估与类名称分配分开.关于灵活性的上述其他观点也可用于此答案.
.test(@Name) { @addName: ~"sm-@{name}"; &.@{addNamE} { BACkground: ~"url(../images/icons/sm/@{name}-16x16.png)"; } }
以上是大佬教程为你收集整理的css – 如何使用LESS动态生成整个类并将其连接到其父选择器全部内容,希望文章能够帮你解决css – 如何使用LESS动态生成整个类并将其连接到其父选择器所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。