LESS 中使用 “&” 符号的技巧

LESS 是一种 CSS 预处理器，它拓展了 CSS 的语法，增加了许多有用的特性，使得 CSS 编写更加灵活和高效。在 LESS 中，"&" 符号是一个十分强大的语法元素，经常用于在样式表中定义嵌套规则和伪类样式等，其用法和技巧如下。

嵌套规则

在 LESS 中，可以使用 "&" 符号将样式规则嵌套在另一个样式规则中。这样可以避免嵌套层级过多，让 CSS 样式表更加简洁和易于维护。

示例代码

// javascriptcn.com 代码示例
.parent {
  background-color: #f1f1f1;

  .child {
    color: #333;
  }

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

在上面的示例代码中，".child" 样式规则被嵌套在 ".parent" 样式规则中，其编译后的 CSS 代码如下。

// javascriptcn.com 代码示例
.parent {
  background-color: #f1f1f1;
}

.parent .child {
  color: #333;
}

.parent:hover {
  background-color: #e1e1e1;
}

伪类样式

在 CSS 中，伪类样式通常被用于设置元素的状态和行为，比如鼠标悬停、点击等。在 LESS 中，可以使用 "&" 符号将伪类样式嵌套在样式规则中，以实现更加精细的样式控制。

示例代码

// javascriptcn.com 代码示例
.btn {
  background-color: #007bff;
  color: #fff;
  border: none;
  padding: 10px;
  display: inline-block;
  text-align: center;
  border-radius: 4px;

  &:hover {
    background-color: #0069d9;
  }

  &:active {
    background-color: #0062cc;
  }

  &:focus {
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
  }
}

在上面的示例代码中，".btn" 样式规则定义了一个基本的按钮样式，而 "&:hover"、"&:active" 和 "&:focus" 则分别表示鼠标悬停、鼠标点击和按钮聚焦状态下的的样式。其编译后的 CSS 代码如下。

// javascriptcn.com 代码示例
.btn {
  background-color: #007bff;
  color: #fff;
  border: none;
  padding: 10px;
  display: inline-block;
  text-align: center;
  border-radius: 4px;
}

.btn:hover {
  background-color: #0069d9;
}

.btn:active {
  background-color: #0062cc;
}

.btn:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
}

总结

"&" 符号是 LESS 中一个非常有用的语法元素，它可以使得样式表的编写更加简洁和灵活，同时也可以实现更加细致和精确的样式控制。需要注意的是，在使用 "&" 符号时，应该掌握好其用法和限制，避免产生不必要的嵌套和重复定义。

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