当前位置: 首页 > 文档资料 > Less 简明教程 >

2.14 Extend

优质
小牛编辑
127浏览
2023-12-01

Extend就相当于Java的继承,它允许一个选择器继承另一个选择器的样式。Extend有两种语法格式。

一种是:

<selector>:extend(<parentSelector>) { }

另一种是:

<selector> {
  &:extend(<parentSelector>);
}

假设有一个 .inline 的类:

.inline {
    color: red;
}

现在希望 nav ul 选择器能够让继承 .inline类的 color 属性,就可以使用以下两种方式的任意一种来实现:

nav ul:extend(.inline) {
}

或者

nav ul {
    &:extend(.inline);
}

这两种方式得到的结果完全相同,编译后的CSS代码为:

.inline,
nav ul {
  color: red;
}

一个选择器还可以继承多个选择器的属性,只需写多个 :extend 语句就可以了。如,.e 同时继承了 .f 和 .g 的属性:

.e:extend(.f) {}
.e:extend(.g) {}

为了方便,Less允许仅使用一个 :extend 语句,只需在括号中提供用逗号隔开的选择器列表即可。什么两个 :extend 语句的等价写法为:

.e:extend(.f, .g) {}