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 | 结合样式/更高级的混音 使用扩展我们可以将特定选择器的相同样式组合到其他选择器中. |