如何使用&操作符实现父元素向子元素传递CSS属性？

首先得说明一下：你当前写的LESS代码其实不会自动把.button的height和width传递给.button-blue、.button-red——因为LESS的嵌套只是帮你生成子选择器，但不会默认继承父选择器的属性。不过我们可以用LESS的特性来达成你想要的效果。

方法1：使用混合（Mixins） #

这是最直接的方式，把需要复用的属性封装成一个混合，然后在需要的地方引入。这样编译后每个子选择器都会包含这些属性，完全符合你期望的输出：

// 定义一个可复用的混合，括号表示不会编译成独立的CSS选择器
.button-base() {
  height: 20px;
  width: 20px;
}

.button {
  .button-base(); // 父元素应用基础样式
  &-blue {
    .button-base(); // 子元素继承基础样式
    background-color: blue;
  }
  &-red {
    .button-base(); // 子元素继承基础样式
    background-color: red;
  }
}

编译后的CSS就是你想要的结果：

.button {
  height: 20px;
  width: 20px;
}
.button-blue {
  height: 20px;
  width: 20px;
  background-color: blue;
}
.button-red {
  height: 20px;
  width: 20px;
  background-color: red;
}

方法2：使用扩展（Extend） #

如果你希望CSS代码更简洁（复用选择器分组），可以用Extend特性，它会让子选择器和父选择器共享同一组属性：

.button {
  height: 20px;
  width: 20px;
}

.button {
  &-blue:extend(.button) {
    background-color: blue;
  }
  &-red:extend(.button) {
    background-color: red;
  }
}

编译后的CSS会是这样的：

.button, .button-blue, .button-red {
  height: 20px;
  width: 20px;
}
.button-blue {
  background-color: blue;
}
.button-red {
  background-color: red;
}

这种方式的好处是减少了重复代码，不过输出的结构和你最初期望的略有不同，但功能是完全一样的。

为什么你原来的写法不行？ #

再补充一下：你原来的嵌套写法&-blue只是生成.button-blue这个选择器，但.button的属性只会作用于.button本身，LESS不会自动把父选择器的属性“拷贝”到嵌套的子选择器里——这就是为什么需要用混合或扩展来主动传递属性。

内容的提问来源于stack exchange，提问作者ctaylordev94