color: blue;
}
[title=”identifier”],
.noQuote,
.singleQuote,
.doubleQuote {
color: blue;
}
注意：less中不区分单引号双引号
关键字all：
复制代码
.a.b.test,
.test.c {
color: orange;
}
.test {
&:hover {
color: green;
}
}</p>
<p>.replacement:extend(.test all) {}
编译后
复制代码
.a.b.test,
.test.c,
.a.b.replacement,
.replacement.c {
color: orange;
}
.test:hover,
.replacement:hover {
color: green;
}
变量选择器：
复制代码
@variable: .bucket;
@{variable} { // interpolated selector
color: blue;
}
.some-class:extend(.bucket) {}// 不会匹配任何选择元素
.bucket {
color: blue;
}
.some-class:extend(@{variable}) {} // 不会匹配任何元素
@variable: .bucket;
注意：extend不匹配变量。
@media：
复制代码
@media print {
.screenClass:extend(.selector) {} // extend inside media
.selector {
color: black;
}
}
.selector {
color: red;
}
@media screen {
.selector {
color: blue;
}
}
编译后
复制代码
@media print {
.selector,
.screenClass {
color: black;
}
}
.selector {
color: red;
}
@media screen {
.selector {
color: blue;
}
}
注意：extend只能匹配@media中前面定义的，在后面定义的将忽略。
使用extend重写样式：
在开发中我们会定义一些通用样式，然后单独样式在添加class，使用css的后面覆盖前面的原理来实现样式。extend也可以实现这种效果，如下：
复制代码
.animal {
background-color: black;
color: white;
}
.bear {
&:extend(.animal);
background-color: brown;
}
减少css代码：
复制代码
.my-inline-block() {
display: inline-block;
font-size: 0;
}
.thing1 {
.my-inline-block;
}
.thing2 {
.my-inline-block;
}
编译后：
复制代码
.thing1 {
display: inline-block;
font-size: 0;
}
.thing2 {
display: inline-block;
font-size: 0;
}
使用extend
复制代码
.my-inline-block {
display: inline-block;
font-size: 0;
}
.thing1 {
&:extend(.my-inline-block);
}
.thing2 {
&:extend(.my-inline-block);
}
编译后
复制代码
.my-inline-block,
.thing1,
.thing2 {
display: inline-block;
font-size: 0;
}
