LESS 中的继承 (@extend) 详解-JavaScript中文网-JavaScript教程资源分享门户

LESS 是一种 CSS 预处理器，它提供了许多方便的语法和功能，其中之一就是继承 (@extend)。继承是一种非常有用的功能，它可以让我们在编写样式表时更加简洁、灵活和易于维护。

什么是继承 (@extend)

继承是一种将一个选择器的样式应用到另一个选择器上的方式。在 LESS 中，我们可以使用 @extend 指令来实现继承。例如，我们可以定义一个基础的样式：

.base {
  font-size: 16px;
  color: #333;
}

然后，我们可以使用 @extend 指令将它应用到另一个选择器上：

.button {
  @extend .base;
  padding: 10px;
  background-color: #f00;
}

这样，.button 选择器就继承了 .base 选择器的样式，它的样式表现将会是：

.base, .button {
  font-size: 16px;
  color: #333;
}
.button {
  padding: 10px;
  background-color: #f00;
}

继承的好处

继承的好处在于它可以让我们避免重复编写类似的样式。例如，我们可以定义一个基础的按钮样式：

.button {
  padding: 10px;
  border: none;
  font-size: 16px;
  color: #fff;
  background-color: #f00;
}

然后，我们可以使用 @extend 指令来创建不同样式的按钮：

// javascriptcn.com 代码示例
.primary-button {
  @extend .button;
  background-color: #00f;
}

.secondary-button {
  @extend .button;
  background-color: #0f0;
}

这样，我们就可以轻松地创建不同样式的按钮，而不必重复编写基础样式。

继承的注意事项

虽然继承是一种非常有用的功能，但是在使用它时，需要注意一些问题。

继承的层级

继承是通过 CSS 规则层级来实现的。例如，我们可以定义一个基础样式：

.base {
  font-size: 16px;
  color: #333;
}

然后，我们可以定义一个更具体的样式：

.button {
  @extend .base;
  padding: 10px;
  background-color: #f00;
}

但是，如果我们定义了一个更具体的样式：

.button.primary {
  @extend .button;
  background-color: #00f;
}

我们使用 @extend 指令继承的是 .button 选择器的样式，而不是 .base 选择器的样式。这是因为 .button.primary 的层级比 .base 更高。

继承的重复

使用继承时，需要注意样式的重复。例如，如果我们定义了两个基础样式：

// javascriptcn.com 代码示例
.base {
  font-size: 16px;
  color: #333;
}

.secondary {
  font-size: 14px;
  color: #666;
}

然后，我们定义一个样式：

.button {
  @extend .base;
  @extend .secondary;
  padding: 10px;
  background-color: #f00;
}

这样，.button 选择器就继承了 .base 和 .secondary 选择器的样式，但是它们有一些样式是重复的（例如 font-size），这会增加样式表的大小。

继承的影响

使用继承时，需要注意样式的影响。例如，我们定义了一个基础样式：

.base {
  font-size: 16px;
  color: #333;
}

然后，我们定义了一个样式：

.button {
  @extend .base;
  padding: 10px;
  background-color: #f00;
}

但是，如果我们修改了 .base 的样式：

.base {
  font-size: 14px;
  color: #666;
}

那么，.button 选择器的样式也会受到影响，因为它继承了 .base 选择器的样式。

总结

继承是一种非常有用的功能，它可以让我们在编写样式表时更加简洁、灵活和易于维护。但是，在使用继承时，需要注意层级、重复和影响等问题。合理使用继承，可以让我们编写出更加高效和优雅的样式表。

示例代码：

// javascriptcn.com 代码示例
.base {
  font-size: 16px;
  color: #333;
}

.secondary {
  font-size: 14px;
  color: #666;
}

.button {
  @extend .base;
  padding: 10px;
  background-color: #f00;
}

.primary-button {
  @extend .button;
  background-color: #00f;
}

.secondary-button {
  @extend .button;
  background-color: #0f0;
}

.button-with-secondary {
  @extend .button;
  @extend .secondary;
}

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