在Less中什么是＆combinator？

在Less（一种CSS预处理器）中，& 符号被称为“父选择器”或“当前选择器的引用”。这个符号允许你在嵌套的选择器中引用父级选择器。这在编写复杂CSS时非常有用，尤其是当你需要基于当前上下文生成选择器时。

下面是一个简单的示例，展示了如何在Less中使用 & 符号：

.parent {
  color: red;

  &.modified { // 这里，& 引用了 .parent
    color: blue;
  }

  &:hover { // 这里，& 同样引用了 .parent
    color: green;
  }

  .child {
    color: inherit;

    &:hover { // 在这个上下文中，& 引用了 .child
      color: purple;
    }
  }
}

上述Less代码会编译成以下CSS代码：

.parent {
  color: red;
}
.parent.modified { /* 注意这里是 .parent.modified，而不是 .modified */
  color: blue;
}
.parent:hover {
  color: green;
}
.parent .child {
  color: inherit;
}
.parent .child:hover { /* 在这个上下文中，&:hover 变成了 .child:hover */
  color: purple;
}

通过使用 & 符号，你可以更灵活地创建选择器，而无需重复编写冗长的选择器链。这在处理大型CSS项目时尤其有用，因为它可以帮助你保持代码的整洁和可维护性。