LESS 中继承的使用技巧与注意事项-JavaScript中文网-JavaScript教程资源分享门户

LESS 是一种 CSS 预处理器，它提供了许多强大的功能，其中之一就是继承。继承让我们可以在多个样式类之间共享样式属性，从而减少代码量并提高代码的可维护性。在本文中，我们将详细介绍 LESS 中继承的使用技巧和注意事项，并提供示例代码。

基本语法

在 LESS 中，我们可以使用 & 符号来表示当前选择器的父级选择器。例如，我们有以下两个样式类：

// www.javascriptcn.com code example
.btn {
  background-color: #007bff;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 0.5rem 1rem;
}

.btn-primary {
  &.disabled, &:disabled {
    background-color: #6c757d;
    cursor: not-allowed;
  }
}

在上面的示例中，.btn-primary 类继承了 .btn 类的所有样式属性，并添加了一些额外的属性。&.disabled 和 &:disabled 分别表示 .btn-primary.disabled 和 .btn-primary:disabled 这两个选择器。

使用技巧

1. 避免链式继承

在 LESS 中，我们可以使用链式继承来继承多个样式类的属性。例如：

.error {
  color: red;
}

.error-danger {
  .error;
  font-weight: bold;
}

在上面的示例中，.error-danger 类继承了 .error 类的属性，并添加了一个 font-weight 属性。然而，链式继承可能会导致样式的混乱和不必要的冗余代码。因此，我们应该尽量避免使用链式继承。

2. 使用占位符选择器

在 LESS 中，我们可以使用占位符选择器来定义不输出 CSS 的样式类，然后使用继承来引用这些样式类的属性。例如：

// www.javascriptcn.com code example
%btn {
  background-color: #007bff;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 0.5rem 1rem;
}

.btn-primary {
  &:extend(%btn);
}

.btn-secondary {
  &:extend(%btn);
  background-color: #6c757d;
}

在上面的示例中，%btn 是一个占位符选择器，它定义了一个按钮的样式属性。.btn-primary 类和 .btn-secondary 类都继承了 %btn，并添加了一些额外的属性。使用占位符选择器可以避免输出不必要的样式类，从而减少 CSS 文件的大小。

3. 尽量使用类选择器

在 LESS 中，我们可以使用元素选择器、伪类选择器和伪元素选择器来定义样式类。然而，这些选择器的优先级较低，可能会导致样式的覆盖和冲突。因此，我们应该尽量使用类选择器来定义样式类，并使用继承来共享属性。

注意事项

1. 继承顺序

在 LESS 中，继承是按照 CSS 的规则进行的，即从右到左，从下到上。例如：

// www.javascriptcn.com code example
.a {
  color: red;
}

.b {
  &.c {
    &.d {
      &:extend(.a);
    }
  }
}

在上面的示例中，.b.c.d 类继承了 .a 类的属性。LESS 将 .a 放在最右边，.b.c.d 放在最左边，因此输出的 CSS 代码为：

.a.b.c.d {
  color: red;
}

2. 继承的限制

在 LESS 中，继承有一些限制。例如，我们不能继承 ID 选择器和属性选择器。这是因为 ID 选择器和属性选择器的优先级较高，可能会导致样式的覆盖和冲突。因此，我们应该尽量避免使用 ID 选择器和属性选择器，并使用类选择器来定义样式类。

示例代码

// www.javascriptcn.com code example
// 定义占位符选择器
%btn {
  background-color: #007bff;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 0.5rem 1rem;
}

// 定义样式类
.btn {
  &:extend(%btn);
}

.btn-primary {
  &:extend(.btn);
}

.btn-secondary {
  &:extend(.btn);
  background-color: #6c757d;
}

.btn-danger {
  &:extend(.btn);
  background-color: #dc3545;
}

.btn-success {
  &:extend(.btn);
  background-color: #28a745;
}

在上面的示例中，我们定义了一个占位符选择器 %btn，然后使用继承来定义多个按钮样式类。.btn 类继承了 %btn，.btn-primary、.btn-secondary、.btn-danger 和 .btn-success 类都继承了 .btn。这样，我们就可以共享按钮的样式属性，并避免输出不必要的样式类。

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

LESS 中继承的使用技巧与注意事项