Less Extend语法使用的一点强调

本文详细介绍了 Less CSS 预处理器中的 Extend 语法特点及其限制。尤其指出当选择器包含变量时,Extend 语法将无法正常工作。通过具体实例展示了这一特性,并解释了背后的原理。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Less中的Extend语法顾名思义实现类似继承的功能,强大且实用,但需要强调一点,使用Extend时,不能Extend含有变量的选择器名称,不然会无效!

例子:


没有任何问题,会编译为:


如果使用变量呢?


在Less中看着很优雅,没毛病,编译为:


up-arrow 和 down-arrow哪去了???


技能一通甩,全是未命中,有没有?


是的,如果Extend去匹配含有变量的选择器会忽略掉,没错,就是这样,直接,干脆!

在Less官方文档中有这么一段关于这个问题的描述:


说中文?好的!

就是说关于Less是否支持变量匹配(如果含有变量的选择器,不管是在Extend匹配条件中还是定义的所需Extend的选择器)到目前为止还是一个悬而未决的提案,就是说现在不支持,以后支不支持?不知道。

结语

Less作为强大的CSS预编译器之一,还有很多小细节值得细细品味,笔者在查阅文档的时候居然没有找到完整的Less官方中文资料,于是翻译了一份最新最完整的Less中文文档,欢迎参阅,如有问题,随时指正。逃:)

Less官方文档[英文]:http://lesscss.org/

Less官方文档[中文]: https://woolyang.github.io/less-docs-cn/

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值