Less Extend语法使用的一点强调

最新推荐文章于 2025-04-15 08:15:17 发布
置顶 最新推荐文章于 2025-04-15 08:15:17 发布
阅读量1.4k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： css JavaScript Less
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/zhaozjc112/article/details/78979066
本文详细介绍了 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/

Less的简单使用（三）——extend的用法
疯子i的博客
06-01 2624
Less的简单使用（三）——Extend的用法 Extend是一个Less伪类，通过:extend在一个选择器中扩展其他选择器样式，从而与匹配其引用的选择器合并。 一、Extend的简单使用 .less文件中的代码： // Extend nav ul { &:extend(.line); background-color: lightgray; } .line { ...
less-Extend（扩展）
稻草人
06-18 692
扩展是一个合并减少伪类选择器是放在与匹配的引用。1、扩展编辑less： nav ul { &:extend(.inline); background: blue; } .inline { color: red; }生成css： nav ul { background: blue; } .inline,nav ul { color: red; }2、扩展嵌套选择器编辑less： .
less 新手入门（一） 变量、extend 扩展
胡西风的博客
12-05 851
一、变量 1. 定义： 使用 @ 符号来定义变量 ，在 Less 中开头是 @ 则是变量，关于变量的命名方法，大家可以参考 js 中命名的规则，毕竟是做前端的，有着统一的习惯有助于我们统一风格。个人推荐变量名的命名规则使用驼峰命名法。第一个单词首写字母小写，从第二个开始，单词首写字母大写。如 boxAaa,boxBbbb,boxContainer,……，当然也是可是使用香肠命名法用下划线 “_” ...
Less中的Extend
歪脖先生的博客
11-21 1528
Less中的Extend Extend就相当于Java的继承，它允许一个选择器继承另一个选择器的样式。Extend有两种语法格式。 一种是： :extend() { } 另一种是： { &:extend();} 假设有一个 .inline 的类： .inline {    color: red;} 现在希望 nav ul 选择器能够让继承 .inline类的 color 属
Less学习（四）----扩展（Extend）
菜同学的博客
08-06 1524
扩展(Extend) 选择器:extend(选择器参数){ } 扩展是less里的伪类,作用是 将选择器与匹配它引用的选择器合并在一起 简单地说，就是 在extend里选择器参数出现的设置规则的时候,也会给extend前的选择器给予同样的规则,相当于非破坏性的搜索和替换（） .a:extend(.b){ } .b{ 样式规则 } 等价于 .b, .a{ 样式规则 } 在输出之前会移除扩展,选择器块...
less学习（四）—关于Extend
MoLvSHan的博客
11-06 708
官方文档是这么介绍Extend的 Extend is a Less Pseudo-Class which merges the selector it is put on with ones that match what it references. 简单翻译就是Extend是less的伪类选择器，这个伪类选择器会将引用它的选择器与匹配它的选择器合并（英语太渣， 不知道翻译的是否准确，下
less新手入门（一） 变量、extend扩展
weixin_34351321的博客
12-22 192
前景提要 个人在学习less时候的学习笔记及个人总结，主要是结合less中文网来学习的，但是说是中文网并不是中文呀，看起来很耽误时间，为了避免以后再次看的时候还要翻译思考，特意做此总结，方便以后查阅。 概述 Less是Css的一种扩展，完全兼容css语法，我们在使用中可以直接 link 引入也可以，通过编译工具，将less 编译成 css后再引入； 目录： 一、变量 二、Extend ...
Less：继承（extend）
听海边涛声
08-25 1626
Less：继承（extend）
less语法（一）变量与extend
weixin_34123613的博客
12-09 152
摘要： 　　　作为 CSS 的一种扩展，Less 不仅完全兼容 CSS 语法，而且连新增的特性也是使用 CSS 语法。这样的设计使得学习 Less 很轻松，而且你可以在任何时候回退到 CSS。less文件是以less作为文件后缀名，HTML引用时可以像css那样引用，如下： <link rel="stylesheet/less" type="text/css" href="style...
less或sass嵌套写法不生效,但不嵌套可以生效
范天缘的博客
03-22 1万+
记得在style标签加lang属性，我就是忘记了lang属性所有才没有生效 //less <style lang="less" scoped> @import './index.less'; </style> //sass <style lang="sass" scoped> @import './index.sass'; </style>
less之继承 +避免编译
你好牛蛙！
11-01 1182
继承用于使一个混合继承另一个规则集里面的内容 怎么说呢，就类似于混合嵌套，不过继承性能更优但是没有混合灵活 继承的方法 用less中的extend()函数 语法：选择器:extend(规则集名) 这里的规则集就是一个混合去掉括号就是一个规则集，为什么说继承不灵活呢，因为他不能用参数，继承的规则集中不能有参数 或者在选择器的{}里面写&:extend(规则集名) 这是d3规则集 并不是说用了extend()就能继承规则集中的所有东西，就比如:hover{}但是我们可以在规则集名字的后面加一个
less
jiandan1127的博客
08-24 284
预处理器就是在代码交给编译器处理前，预先进行一些处理 less要点：变量，混合，嵌套，函数&amp;运算，扩展 1.链接 &lt;link rel="stylesheet/less" type="text/css" href="styles.less" /&gt; &lt;script src="less.js" type="text/javascript"&g
less笔记-继承（Extend）
热门推荐
永远的北极光
09-13 3万+
一、Extend Syntax 说明：The extend is either attached to a selector or placed into a ruleset. It looks like a pseudoclass with selector parameter optionally followed by the keyword。 继承被附在选择器后面或放置在规则集（即
less学习系列之extend继承
爱代码的小海的博客
10-23 933
系列文章目录 文章目录系列文章目录一、extend的初步理解二、extend的使用形式 一、extend的初步理解 extend是less语法的一个伪类 用来继承匹配的样式集 二、extend的使用形式 /*less代码*/ .wrap{ color:red; } /*形式1*/ .inner{ &:extend(.wrap); background-color:#f40; } /*编译后的代码*/ .wrap, .inner{ color:red; }
less之继承（官方文档翻译）
兰为鹏的博客
02-15 1793
默认情况下，Extend会查找选择器之间的精确匹配。当你用extend的最后一个参数来指定来制定所有的关键字，它会告诉Less将该选择器匹配为另一个选择器的一部分。选择器将被复制，然后仅选择器的匹配部分将被扩展替换，从而形成一个新的选择器。注意，这和pre:hover:extend(div pre， .bucket tr)是一样的。一个选择器可以包含多个extend子句，但所有的extends都必须位于选择器的末尾。Extend是一个伪属性较少的类，它将放置的选择器与它引用的选择器进行合并。
在Less中使用extend有什么用？
最新发布
王铁柱666的博客
04-15 202
时，它会将一组 CSS 属性从一个选择器复制（或“扩展”）到另一个选择器，这样你就可以避免重复编写相同的 CSS 代码。是一个强大的功能，它允许你共享一组 CSS 属性从一个选择器到另一个选择器，而无需使用混合（mixin）。这个功能特别有用，因为它可以帮助你保持 CSS 的干净、有序，并减少冗余。通过减少代码中的重复，不仅可以用于简单的选择器，还可以用于更复杂的选择器，包括带有伪类和媒体查询的选择器。下面是一个简单的示例，展示了如何在 Less 中使用。的样式，并添加或覆盖一些额外的样式。
【less编写css元素宽高失效】元素宽高样式失效解决方法
qq_45827479的博客
08-04 546
今天使用less写css样式例子练习时，所有的宽高样式都不生效，修改方法如下
Less 语法详解：变量与 extend 使用指南
"这篇文档详细解析了动态样式语言Less中的变量和`extend`特性，旨在帮助读者理解如何在Less中有效利用这些特性增强CSS代码的可维护性和复用性。Less是CSS的一个扩展，它引入了变量、嵌套规则、运算符等功能，使得CSS...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值