了解多重继承 CSS 的实践之 LESS

背景

LESS 是一种动态样式语言，属于 CSS 预处理器的一种，并且能够让 CSS 代码更加易于编写和维护。LESS 具有多重继承的能力，可以让开发者在编写 CSS 样式时更加便捷。

多重继承的概念

多重继承是指一个样式可以继承多个父样式的属性。

例如，有三个样式：

// javascriptcn.com 代码示例
.box {
  width: 100px;
  height: 100px;
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

如果使用 LESS 实现多重继承，代码如下所示：

// javascriptcn.com 代码示例
.box {
  width: 100px;
  height: 100px;

  &.red {
    background-color: red;
  }

  &.blue {
    background-color: blue;
  }
}

这样，在 HTML 中就可以调用这个样式：

<div class="box red"></div>

这个 div 的样式就会继承 .box 和 .red 的属性。

LESS 的多重继承

LESS 的多重继承与 CSS 的多重继承相同，只是 LESS 有一些扩展功能。

Extend 方法

使用 exten 方法，可以将一个样式继承到另一个样式上。实现方式是在样式的定义中使用 @extend 关键字声明父样式。

例如：

// javascriptcn.com 代码示例
.btn-style {
  border: 1px solid #000;
  background-color: #fff;
  font-size: 16px;
}

.btn-big-style {
  @extend .btn-style;
  font-size: 20px;
}

这样，.btn-big-style 样式就继承了 .btn-style 样式的属性，并且覆盖了 font-size 的属性值。

伪类的多重继承

LESS 也可以使用伪类多重继承，例如：

// javascriptcn.com 代码示例
.btn-style {
  border: 1px solid #000;
  background-color: #fff;

  &:hover {
    background-color: #ccc;
  }
}

.btn-big-style {
  @extend .btn-style;
  font-size: 20px;

  &:hover {
    background-color: #999;
  }
}

这个例子中，.btn-big-style 样式继承了 .btn-style 样式和 :hover 伪类，并覆盖了其中的 font-size 和 background-color 属性值。

总结

LESS 提供了多重继承的功能，使用起来非常方便。通过多重继承可以让 CSS 样式更加简洁、可维护性高，并且方便样式的复用。

需要注意的是，在使用多重继承的过程中要注意样式的继承顺序，保证父样式的属性在样式表中的排列顺序也是正确的。

示例代码

// javascriptcn.com 代码示例
/* 声明 box 样式 */
.box {
  width: 100px;
  height: 100px;
}

/* 声明 red 样式 */
.red {
  background-color: red;
}

/* 声明 blue 样式 */
.blue {
  background-color: blue;
}

/* 声明 multi 样式 */
.multi {
  width: 150px;
  height: 150px;

  &.red.blue {
    opacity: .5;
  }
}

/* 声明 btn-style 样式 */
.btn-style {
  border: 1px solid #000;
  background-color: #fff;
  font-size: 16px;

  &:hover {
    background-color: #ccc;
  }
}

/* 声明 btn-big-style 样式 */
.btn-big-style {
  @extend .btn-style;
  font-size: 20px;

  &:hover {
    background-color: #999;
  }
}

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65463fc37d4982a6eb0180b5