Extend是一个LESS伪类，它通过使用:extend 选择器扩展一个选择器中的其他选择器样式.
以下示例演示了在LESS文件中使用 extend :
<!doctype html> <head> <link rel = "stylesheet" href = "style.css" type = "text/css" /> </head> <body> <div class = "style"> <h2>Welcome to TutorialsPoint</h2> <p>Hello!!!!!</p> </div> </body> </html>
接下来，创建 style.less 文件.
h2 {
&:extend(.style);
font-style: italic;
}
.style {
background: green;
}您可以将 extend.less 文件编译为 extend.css 使用以下命令 :
lessc style.less style.css
执行上面的命令;它将使用以下代码自动创建 style.css 文件;
h2 {
font-style: italic;
}
.style,
h2 {
background: blue;
}按照以下步骤查看上述代码的工作原理;
将上述html代码保存在 extend_syntax.htm 文件中.
在浏览器中打开此HTML文件，将显示以下输出.
将Extend放入规则集或附加到选择器.它类似于包含一个或多个类的伪类，这些类由逗号分隔.使用可选关键字 all ，可以跟踪每个选择器.
以下示例演示如何使用在LESS文件中扩展语法 :
<!doctype html> <head> <link rel = "stylesheet" href = "style.css" type = "text/css" /> </head> <body> <div class = "style"> <h2>Welcome to TutorialsPoint</h2> <div class = "container"> <p>Hello!!!!!</p> </div> </div> </body> </html>
现在创建 style.less 文件.
.style:extend(.container, .img) {
background: #BF70A5;
}
.container {
font-style: italic;
}
.img {
font-size: 30px;
}您可以将 style.less 文件编译为 style.css 使用以下命令 :
lessc style.less style.css
执行上面的命令;它将使用以下代码自动创建 style.css 文件;
.style {
background: #BF70A5;
}
.container,
.style {
font-style: italic;
}
.img,
.style {
font-size: 30px;
}按照以下步骤查看上述代码的工作原理;
将上述html代码保存在 extend_syntax.htm 文件中.
在浏览器中打开此HTML文件，将显示以下输出.
下表列出了你可以在LESS中使用的所有扩展语法类型;
| Sr.No. | 类型&描述 |
|---|---|
| 1 | 扩展连接到选择器 Extend连接到一个选择器，它看起来类似于一个伪类，选择器作为参数. |
| 2 | 扩展内部规则集 &:extend(selector)语法可以放在正文中规则集. |
| 3 | 扩展嵌套选择器 使用 extend 匹配嵌套选择器选择器. |
| 4 | 与扩展完全匹配 默认情况下， extend 查找确切的选择器之间的差距. |
| 5 | 第n个表达式 第n个表达式的形式在扩展时非常重要，否则它会对待选择器不同. |
| 6 | 扩展"全部" 当关键字 all 是最后在 extend 参数中确定，然后LESS将该选择器与另一个选择器的一部分匹配. |
| 7 | 带扩展的选择器插值 extend 可以连接到插值选择器. |
| 8 | 在@media内部进行范围扩展 Extend仅匹配同一媒体声明中存在的选择器. |
| 9 | 复制检测 它无法检测到选择器的重复. |
以下是用例的类型for Extend
| Sr.No. | 类型&描述 |
|---|---|
| 1 | 经典用例 经典用例用于避免在LESS中添加基类. |
| 2 | 减小CSS大小 Extend用于将选择器移动到您想要使用的属性;这有助于减少css生成的代码. |
| 3 | 结合样式/更高级的混音 使用扩展我们可以将特定选择器的相同样式组合到其他选择器中. |
