LESS 中的 @extend 指令详解

LESS 是一种 CSS 预处理器，它扩展了 CSS 语法，使得我们能够写出更优雅、更便于维护的样式代码。其中一个非常强大的功能就是 @extend 指令，它可以将一个选择器的样式继承到另一个选择器上，从而实现样式代码的复用和减少冗余。本文将详解 LESS 中的 @extend 指令，包括使用方法、注意事项和示例代码。

使用方法

@extend 指令的基本语法如下：

.selector {
  property: value;
  &:extend(.other-selector);
}

其中，.selector 表示当前选择器，property: value 表示当前选择器的样式属性和值，&:extend(.other-selector); 表示将 .selector 的样式继承到 .other-selector 上。

例如，下面的 LESS 代码定义了两个选择器 .btn 和 .btn-primary，其中 .btn-primary 继承了 .btn 的样式：

// www.javascriptcn.com code example
.btn {
  border: 1px solid #666;
  padding: 5px 10px;
  font-size: 14px;
}
.btn-primary {
  color: #fff;
  background-color: #007bff;
  &:extend(.btn);
}

在生成的 CSS 中，.btn-primary 将继承 .btn 的所有样式：

// www.javascriptcn.com code example
.btn {
  border: 1px solid #666;
  padding: 5px 10px;
  font-size: 14px;
}
.btn-primary {
  color: #fff;
  background-color: #007bff;
  border: 1px solid #666;
  padding: 5px 10px;
  font-size: 14px;
}

注意事项

使用 @extend 指令时需要注意以下几点：

• @extend 指令只能用在当前选择器内部。
• 继承的样式不能包含后代选择器。
• 继承的样式不能包含属性插值、变量、mixin 等。
• 继承的样式的顺序决定了生成的 CSS 的顺序。
• 某些情况下会生成额外的 CSS，导致代码冗余，需要谨慎使用。

例如，下面的 LESS 代码中使用了错误的 @extend 指令：

// www.javascriptcn.com code example
.btn {
  border: 1px solid #666;
  padding: 5px 10px;
  font-size: 14px;
}
.btn-primary {
  color: #fff;
  background-color: #007bff;
  &:extend(.btn span); // 错误的写法
}

上面的代码中，.btn-primary 继承了 .btn span 的样式，但 .btn 中并没有包含 span，因此这个继承是无效的。

示例代码

下面是一个实际的 LESS 代码示例，用于演示 @extend 指令的用法：

// www.javascriptcn.com code example
// 定义基本样式
.btn {
  border: 1px solid #666;
  padding: 5px 10px;
  font-size: 14px;
}

// 定义按钮颜色样式
.btn-primary {
  color: #fff;
  background-color: #007bff;
  &:hover {
    background-color: #0062cc;
  }
  &:focus {
    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
  }
}

.btn-secondary {
  color: #fff;
  background-color: #6c757d;
  &:hover {
    background-color: #5a6268;
  }
  &:focus {
    box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
  }
}

// 使用 @extend 指令复用样式
.btn-danger {
  color: #fff;
  background-color: #dc3545;
  &:hover {
    background-color: #c82333;
  }
  &:focus {
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5);
  }
  &:extend(.btn);
}

.btn-success {
  color: #fff;
  background-color: #28a745;
  &:hover {
    background-color: #218838;
  }
  &:focus {
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5);
  }
  &:extend(.btn);
}

在生成的 CSS 中，.btn-danger 和 .btn-success 将继承 .btn 的所有基本样式，同时也拥有自己的颜色样式：

// www.javascriptcn.com code example
.btn {
  border: 1px solid #666;
  padding: 5px 10px;
  font-size: 14px;
}
.btn-primary {
  color: #fff;
  background-color: #007bff;
}
.btn-primary:hover {
  background-color: #0062cc;
}
.btn-primary:focus {
  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
}
.btn-secondary {
  color: #fff;
  background-color: #6c757d;
}
.btn-secondary:hover {
  background-color: #5a6268;
}
.btn-secondary:focus {
  box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
}
.btn-danger {
  color: #fff;
  background-color: #dc3545;
  border: 1px solid #666;
  padding: 5px 10px;
  font-size: 14px;
}
.btn-danger:hover {
  background-color: #c82333;
}
.btn-danger:focus {
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5);
}
.btn-success {
  color: #fff;
  background-color: #28a745;
  border: 1px solid #666;
  padding: 5px 10px;
  font-size: 14px;
}
.btn-success:hover {
  background-color: #218838;
}
.btn-success:focus {
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5);
}

通过使用 @extend 指令，我们可以轻松地实现样式代码的复用和减少冗余，提高前端开发效率和代码可维护性。同时，在使用 @extend 指令时也需要注意一些细节，避免出现代码错误和冗余。

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