LESS 中 @extend 的使用场景及注意事项-JavaScript中文网-JavaScript教程资源分享门户

LESS 是一种基于 CSS 的预处理器，可以通过给 CSS 添加变量、函数、操作符等功能，提高 CSS 编写的效率和维护性。其中 @extend 是一个十分常用的功能，用于实现样式的继承，本文将介绍其使用场景及注意事项。

一、@extend 的使用场景

1. 统一风格

当一个项目中有大量相同的样式时，我们可以采用 @extend 来实现样式的统一。例如，我们需要实现一组按钮样式，有默认状态、悬停状态、禁用状态：

// www.javascriptcn.com code example
.btn-default {
  color: #fff;
  background-color: #000;
  border: none;
}

.btn-hover {
  color: #000;
  background-color: #fff;
  border: none;
}

.btn-disabled {
  color: #000;
  background-color: #ccc;
  border: none;
}

这时我们发现，这三个样式十分相似，只是颜色和背景色略有不同。我们可以采用 @extend 来继承 btn-default 样式，再重写不同的颜色和背景色：

// www.javascriptcn.com code example
.btn-default {
  color: #fff;
  background-color: #000;
  border: none;
}

.btn-hover {
  &:extend(.btn-default);
  color: #000;
  background-color: #fff;
}

.btn-disabled {
  &:extend(.btn-default);
  color: #000;
  background-color: #ccc;
}

这样，我们可以通过继承来避免样式代码的重复，使代码更加简洁和易于维护。

2. 修改样式

当我们需要修改某个样式的一部分属性时，@extend 也会发挥作用。例如，我们需要修改某个按钮的禁用状态的颜色：

.btn-disabled-custom {
  &:extend(.btn-disabled);
  background-color: #f00;
}

这里我们通过继承 .btn-disabled 样式，再重写背景色，实现了对样式的修改。

3. 只在当前作用域

@extend 样式不仅可以继承全局样式，在局部样式中同样适用。例如，我们有一个用于显示错误信息的样式，只需要在当前作用域中继承即可：

.form-error {
  color: #f00;
  font-size: 12px;
}

.form-input-error {
  .form-error;
}

这里我们在 .form-input-error 的局部作用域中继承了 .form-error 样式。

二、@extend 的注意事项

虽然 @extend 功能十分强大，但在使用时需要注意以下几点：

1. 合理使用

@extend 功能使用不当，容易产生副作用和意外的样式继承，使我们的样式表失去可预期的效果。因此，我们应该合理使用 @extend 功能，避免在复杂的样式继承关系中使用。

2. 多次继承禁用

多次继承同一样式会产生失控的后果，例如样式重复、样式覆盖等。因此，我们应该禁用多次继承。

3. 多层继承谨慎

多层继承会导致样式从多个不同的父元素中继承，容易产生不可预测的效果。我们应该尽量避免多层继承，或者将其限制在必要的范围内。

三、示例代码

最后，提供一个使用 @extend 继承样式的示例：

// www.javascriptcn.com code example
.btn-default {
  color: #fff;
  background-color: #000;
  border: none;
}

.btn-hover {
  &:extend(.btn-default);
  color: #000;
  background-color: #fff;
}

.btn-disabled {
  &:extend(.btn-default);
  color: #000;
  background-color: #ccc;
}

.btn-disabled-custom {
  &:extend(.btn-disabled);
  background-color: #f00;
}

.form-error {
  color: #f00;
  font-size: 12px;
}

.form-input-error {
  .form-error;
}

通过这个示例，我们可以看到 @extend 功能的方便和简洁，同时也需要注意其使用的注意事项。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67cfaac2e46428fe9eb730ab

LESS 中 @extend 的使用场景及注意事项