Less继承深度剖析

一、Less继承方法

Less是一种CSS预处理器，它提供了很多CSS所不具备的特性，比如变量、函数、混合器等。其中，继承是Less最为强大的特性之一。涉及到继承，我们可以通过三种方法来实现对代码的重用。

一、@extend继承方法

.child {
  font-size: 12px;
}

.parent {
  &:extend(.child);
  color: red;
}

通过@extend语句，我们可以使.parent继承.child的全部属性。这时候.parent将具有继承的属性font-size:12px，同时还将添加新的属性color:red。

二、继承servlet

另外，Less还支持继承类似Java中的servlet。这种继承方式可以使父级选择器中的所有属性和选择器全部被继承到子选择器中去。

.parent {
  .child {
    color: red;
  }
}
.new-child:extend(.parent);

这里，.new-child将从.parent中继承.color:red和.child选择器。

三、JS继承

通过Less提供的js方法，我们还可以扩展基本的CSS属性和自定义的属性。

(@bg: red;) 

DIV {
  background-color: @bg;
  .a {
    background-color: @bg;
  }
  H1 {
    background-color: yellow;
    &-inner {
      background-color: @bg;
    }
  }
}

在上述代码中，@bg是一个Less变量，我们可以将其定义为red。然后，我们可以通过使用变量名来获取这个值，达到样式重用的目的。

二、Less继承方式

一、字符串选择器

在Less中，我们可以使用字符串选择器，即两个引号包含的内容，作为选择器。这种方式适用于那些无法通过普通的选择器来找到的元素，比如HTML5自定义元素。

@element: ~"x-my-element";

@{element} {
  display: flex;
}

在上面的示例中，我们定义了一个名为x-my-element的HTML5自定义元素。然后，我们使用@{element}，将其作为选择器来设置样式。

二、逗号分割选择器

在Less中，我们还可以使用逗号分割选择器来对多个选择器进行继承。

.parent-1, .parent-2 {
  color: red;
}

.child:extend(.parent-1, .parent-2) {
  font-size: 12px;
}

通过逗号分割，我们可以一次性为多个选择器添加相同的样式，这样就不用重复写多次了。

三、Less继承父级样式

在Less中，还有一种特殊的继承方式，即继承父级样式。这种继承方式通常适用于嵌套样式的情况，可以继承到其外层所有样式。

.parent {
  color: red;
  .child:extend(&) {
    font-size: 12px;
  }
}

在上述代码中，&代表父选择器，.child:extend(&)将继承父级样式，即color:red。这种方式通常能大大简化CSS代码。

四、Less继承嵌套样式

在Less中，我们还可以将继承和嵌套结合起来使用。这种方式可以方便我们对于复杂样式的重用和编辑。

.parent {
  .center {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .child {
    &:extend(.center);
    width: 100px;
    height: 100px;
  }
}

通过嵌套样式，我们很直观地看出.parent的子类.child继承了.parent中.center的所有样式。这样，我们就可以方便地将.center样式集中起来，便于维护。

五、Less继承只能有一个吗

在Less中，我们可以使用多个继承语句来继承多个选择器，但是，一个选择器只能被继承一次。在继承同一个选择器两次时，Less会报错。

.parent {
  color: red;
}
.child:extend(.parent), .child2:extend(.parent) {
  font-size: 12px;
}

通过逗号分割，我们可以一次为多个选择器添加相同的样式，但是如果多个子选择器同时继承了同一个选择器，则会造成代码冗余，也可能引起错误。