LESS 扩展
LESS 扩展
扩展(extend)是一个 LESS 伪类，它通过使用 :extend 选择器扩展其他选择器样式。
例子
<!--extend_syntax.htm--> <!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 文件.
/*style.less*/
h2 {
&:extend(.style);
font-style: italic;
}
.style {
background: green;
}编译less文件
lessc style.less style.css
得到css文件
/*style.css*/
h2 {
font-style: italic;
}
.style,
h2 {
background: blue;
}输出
来执行以下步骤：
保存上面的HTML代码在 extend_syntax.html文件。
在浏览器中打开该HTML文件，得到如下输出显示。
扩展语法
扩展可以放入规则集或连接到一个选择器。它类似于包含一个或多个类，它们是由逗号分隔的伪类。使用可选的关键字all，每个选择器可以这样遵循。
例子
<!--extend_syntax.htm--> <!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.less*/
.style:extend(.container, .img) {
background: #BF70A5;
}
.container {
font-style: italic;
}
.img {
font-size: 30px;
}编译less文件
lessc style.less style.css
得到css文件
/*style.css*/
.style {
background: #BF70A5;
}
.container,
.style {
font-style: italic;
}
.img,
.style {
font-size: 30px;
}输出
执行以下步骤：
保存上面的HTML代码在 extend_syntax.html文件。
在浏览器中打开该HTML文件，得到如下输出显示。
以下列表列出了所有的可用的扩展类型
1.扩展附加到选择器:扩展连接到一个选择器，类似于具有选择器作为参数的伪类。
2.扩展内部规则集:&:extend延长(选择器)语法可以在规则集主体里面放。
3.扩展嵌套选择器:嵌套选择器使用扩展选择器匹配。
4.使用扩展精确匹配:默认情况下扩展外观选择器之间的精确匹配。
5.nth表达式:第n个表达式的形式在某种程度上很重要，否则，它对待选择器将不同。
6.扩展"all":当关键字 all 被最后确定在扩展参数，那么LESS匹配选择器作为另一个选择器部分。
7.选择器插值扩展:在多大程度上可以被连接到内插选择器。
8.作用域及扩展@media:扩展匹配选择器只存在相同的媒体声明中。
9.重复检测:它不能检测选择器的重复。
下面是扩展类型的用例：
1.经典用例:在Less中经典的用例是用来避开添加基类。
2.减小CSS大小:扩展用于移动选择器尽量要使用属性，这有助于降低CSS生成代码。
3.合并风格/更高级的混入:使用扩展我们可以结合特定选择器相同的风格到其他选择器。