Extend是Less的一个伪类,通过使用:Extend伪类,可以让一个选择器继承/包含另一个选择器的样式。
less代码:
.a {
&:extend(.b); // 这里的 & 为 父选择符,表示当前父选择符.a,此处含义:.a:extend(.b)
font-size: 12px;
}
.b {
font-weight: bold;
}
编译后css输出:
.a {
font-size: 12px;
}
.b,
.a {
font-weight: bold;
}
可以看到.a
继承了.b
的样式。
Extend 语法
:extend()可以附加到选择器后面,也可以放到样式规则中,它看起来就像是一个选择器的伪类,在使用的时候我们可以选择性的加上关键字all。
1. Extend附加到选择器后面
Extend可以直接附加到选择后面,看起来就像选择器的伪类,Extend的参数是要继承的选择器。Extend的格式要求:
- Extend必须附加在选择器的后面,例如
:pre:hover:extend (div pre)
- 选择器和Extend之间可以有空格,例如
:pre:hover :extend(div pre)
- 允许多个Extend,例如
:pre:hover:extend(div pre):extend(.button)
或pre:hover:extend(div pre, .button)
- Extend必须在选择器的末尾,不允许使用
pre:hover:extend(div pre).n -child(odd)
less代码:
.style:extend(.img, .container) {
background: #BF70A5;
}
.container{
font-style: italic;
}
.img {
font-size: 45px;
}
编译后css输出:
.style {
background: #BF70A5;
}
.container,
.style {
font-style: italic;
}
.img,
.style {
font-size: 45px;
}
2. 选择器内部的Extend
&:extend(selector)
格式的Extend可以放在选择器内部。&
符号表示当前父选择器。
less代码:
.style{
&:extend(.img, .container);
background: #BF70A5;
}
.container{
font-style: italic;
}
.img {
font-size: 45px;
}
编译后css输出:
.style {
background: #BF70A5;
}
.container,
.style {
font-style: italic;
}
.img,
.style {
font-size: 45px;
}
3. Extend参数匹配嵌套选择器
Extend的参数可以匹配嵌套选择器。
less代码:
.style {
h3 {
color: #BF70A5;
font-size: 30px;
}
}
.img:extend(.style h3){}
编译后css输出:
.style h3,
.img {
color: #BF70A5;
font-size: 30px;
}
4. Extend参数与选择器之间是精确匹配的
Extend参数与选择器之间是精确匹配的。:extend(.style)
精确匹配.style
,但不会匹配*.style
,虽然.style
与*.style
含义相同。
5. 使用 n 的选择器 、使用属性筛选的选择器
1n+3和n+3相当,但:extend不会匹配他们:
:nth-child(1n+3) {
color: blue;
}
.child:extend(n+3) {} // 无法匹配
在属性选择器中的引用类型无关紧要。以下所有都是相同的。
[title=identifier] {
color: blue;
}
[title='identifier'] {
color: blue;
}
[title="identifier"] {
color: blue;
}
.noQuote:extend([title=identifier]) {}
.singleQuote:extend([title='identifier']) {}
.doubleQuote:extend([title="identifier"]) {}
6. 关键字 all的使用
Extend参数中末尾附加all,起一个通配作用,例如:extend(.nav all)
,Less在匹配选择器时会匹配.nav xxxx
这样的选择器。
less代码:
.style.nav,
.nav h3 {
color: orange;
}
.nav {
&:hover {
color: green;
}
}
.container:extend(.nav all) {}
编译后css输出:
.style.nav,
.nav h3,
.style.container,
.container h3 {
color: orange;
}
.nav:hover,
.container:hover {
color: green;
}
7. 选择器插值与Extend
变量名或选择器中可以用@{变量名}的方式引用变量,Extend不能匹配带有@{变量名}的选择器。
带有@{变量名}的选择器可以使用Extend。
less代码:
.style {
color: #BF70A5;
font-style: italic;
}
@{variable}:extend(.style) {}
@variable: .selector;
编译后css输出:
.style,
.selector {
color: #BF70A5;
font-style: italic;
}
8. Extend与@media声明范围
Extend只匹配当前@media声明范围中的选择器。
less代码:
@media print {
.screenClass:extend(.selector) {} // extend inside media
.selector { // 这会被匹配到 - 以为和extend在同一个media内
color: black;
}
}
.selector { // 规则集在上一个样式中 - extend 将忽略这
color: red;
}
@media screen {
.selector { // r规则集在另一个样式中 - extend 将忽略这
color: blue;
}
}
编译后css输出:
@media print {
.selector,
.screenClass { /* ruleset inside the same media was extended */
color: black;
}
}
.selector { /* ruleset on top of style sheet was ignored */
color: red;
}
@media screen {
.selector { /* ruleset inside another media was ignored */
color: blue;
}
}
在媒体声明中写入的 extend ,不匹配其嵌套声明中的选择器:
less代码:
@media screen {
.screenClass:extend(.selector) {} // extend inside media
@media (min-width: 1023px) {
.selector { // css在media内部嵌套 - extend 将忽略它
color: blue;
}
}
}
编译后css输出:
@media screen and (min-width: 1023px) {
.selector { /* ruleset inside another nested media was ignored */
color: blue;
}
}
顶级 :extend 将匹配所有内容,包括嵌套媒体中的选择器
less代码:
@media screen {
.selector { /* ruleset inside nested media - top level extend works */
color: blue;
}
@media (min-width: 1023px) {
.selector { /* ruleset inside nested media - top level extend works */
color: blue;
}
}
}
.topLevel:extend(.selector) {} /* 定层级 :extend 匹配所有 */
编译后css输出:
@media screen {
.selector,
.topLevel { /* ruleset inside media was extended */
color: blue;
}
}
@media screen and (min-width: 1023px) {
.selector,
.topLevel { /* ruleset inside nested media was extended */
color: blue;
}
}
9. 重复检测
Extend使用时无法检测出选择器重复。
less代码:
.cont-main,
.style {
font-family: "Comic Sans MS";
font-size: 30px;
}
.cont-main {
font-size: 30px;
}
.cont:extend(.cont-main, .style) {}
编译后css输出:
.cont-main,
.style,
.cont,
.cont {
font-family: "Comic Sans MS";
font-size: 30px;
}
.cont-main,
.cont {
font-size: 30px;
}
Extend 使用场景
- 典型场景:避免重复添加基类
- 减少CSS文件大小:Extend有助于精简CSS代码
- 结合样式 / 更高级的混合:作为mixin的替代方案——我们可以将特定选择器的样式放进另一个选择器。