Less 继承（Extend）

优质

小牛编辑

130浏览

2023-12-01

这个小节我们会介绍 Less 中的一个伪类，这个伪类一般与我们需要复用的样式所结合使用，但是这个伪类与我们平常使用的CSS 伪类比如 :hover 等不太一样，它可以与这些伪类结合使用，一定要加以区分。

1. 什么是继承？

Extend is a Less pseudo-class which merges the selector it is put on with ones that match what it references.——官方定义

慕课解释：
Extend 是 Less 语法中的一个伪类，它可以继承所匹配的全部样式。
Extend 是为了解决样式表中重复的样式，这一点与其它语言中的继承功能相似。
Extend 主要用于复用重复的样式类，可附加在选择器上或放置到样式集中。

首先，我们先来看一个继承的代码例子，目的是先来大体了解一下 less 中继承的使用方式，让我们大体有个总体的印象，后面会详细讲解它的语法格式。

nav {
  &:extend(.line);
  background: blue;
}

.line {
  color: red;
}

在上面的样式表中，extend 会把 nav 的选择器应用到 .line 样式类上，nav 原本定义的样式保持不变。

nav {
  background: blue;
}

.line，
nav {
  color: red;
}

代码解释：我们可以看到输出的代码中并没有 :extend() 这个伪类，在编译的过程中这个伪类会被删除掉，从而使原代码块保持原样，这一点与 :hover 那些伪类并不相同。

Less 中的继承有 2 种使用方法，分别为在选择器中使用，和在样式集中使用，2 种方式都是把需要继承的选择器名称写入 :extend() 的括号来实现继承的。

Extend 可直接附加在选择器上使用。

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

.b{
  color: red;
}

.a:extend(.b) {
  background: blue;
}

CSS 输出代码：

.a,.b {
  color: red;
}
  
.a {
  background: blue;
}

Extend 也可以放到样式集中使用，但注意在使用时需在前面加上 ‘&’ 符号。

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

.a {
  &:extend(.b);
}

.b {
  color: red;
}

CSS 输出代码：

.b,.a {
  color: red;
}

Extend 可继承多个样式，样式名称之间用 ’,‘ 分开即可。

.a {
  &:extend(.b);
}

.b {
  color: red;
}

输出代码：

.action,
.back-image {
  color: red;
}

.action,
.commom-image {
  background-color: blue;
}

当继承嵌套结构的样式时，如果想要同时继承嵌套结构内的样式，需要在样式名加上 ‘all’ 关键字。

.a {
  &:extend(.b all);
}

.b {
  color: red;
  .c {
    background: #8a2be2;
  }
}

输出代码：

.a,.b { 
  color: red;
}
  
.a .c, .b .c {
  background: #8a2be2;
}

我们再对比下不加 ‘all’ 关键字输出的代码：

.b,
.a {
  color: red;
}

.b .c {
  background: #8a2be2;
}

div:hover:extend(span)

div :extend(span)

.color {
  color: red;
}

.bg-color {
  background: green;
}

//  与 div:hover:extend(.color, .bg-color) 等效
div:hover:extend(.color):extend(.bg-color)

.content:extend(.color), .image:extend(.bg-color) {
  color: red
}

div {
  img {
    width: 10px;
  }
}

.class:extend(div img) {
  hegiht: 20px;
}

.content {
  color: blue;
}

.class:extend(@{selector}) {} // 找不到匹配项

@selector: .content;

:extend() 并没有重复检测，请勿重复定义。比如以下代码中只用继承 .success-info 或者 span 即可，以下写法编译时并不会帮我们把重复的选择器删除掉。

.success-info,
span {
  color: green;
}

.success:extend(.success-info, span) {}

通过继承我们可以创建出不同的基础样式，比如背景颜色、字体大小等：

.info-font {
  font-size: 28px;
}

.content {
  &:extend(.info-font)
}

这种方法帮助我们减少许多重复的代码。

在平时我们引用重复的代码可能会这样写，比如直接将 .a 的样式粘贴到 .b 中，然后代码将成了下面这样：

.a{
  color: #fff;
}

.b{
  color: #fff;
}

:extend() 已经帮助我们选择了一种高效利用样式的方式，通过选择器名称进行共用，从而帮助我们减少了 CSS 代码的体积：

.a, .b{
  color: #fff;
}

本章节介绍了 Less 有关继承的使用方式，使用继承的第一步需要我们声明一个继承的样式，通常来讲这个样式是复用性较强的一段的 CSS 的代码，需要我们具有将重复出现的 CSS 代码抽离出来，比如布局方式、字体颜色大小等，灵活的运用可以帮助我们提高 CSS 代码的可维护性。