如何通过指定父类子类选择器影响子元素？LESS编译问题

嘿，我懂你的困扰！你现在的问题出在LESS中&选择器的工作方式上——当你在.popup.active这个父选择器里写&Content时，&会直接替换成完整的父选择器.popup.active，所以拼接后就变成了.popup.activeContent，再嵌套&Title自然就成了.popup.activeContentTitle，这和你想要的结构完全不符。

要实现你期望的编译结果，有两种简单的方法：

方法一：直接引用完整的子类名 #

既然默认状态下你已经通过嵌套生成了.popupContentTitle，那在.active状态里直接引用这个类名就好，不用再用&拼接：

.popup {
  // 默认状态
  &Content {
    &Title {
      opacity: 0;
    }
  }

  // 激活状态
  &.active {
    .popupContentTitle {
      opacity: 1;
    }
  }
}

这样编译出来的CSS就是你想要的：

.popupContentTitle {
  opacity: 0;
}
.popup.active .popupContentTitle {
  opacity: 1;
}

方法二：用变量存储父类名（更易维护） #

如果你的类名可能会变动，或者不想重复写完整类名，可以用LESS变量来存储父类名，这样在需要引用的时候直接调用变量即可：

@popupBaseClass: popup;

.@{popupBaseClass} {
  &ContentTitle {
    opacity: 0;
  }

  &.active {
    .@{popupBaseClass}ContentTitle {
      opacity: 1;
    }
  }
}

这个方法的编译结果和方法一完全一致，而且后续如果要修改父类名，只需要改变量的值就行，不用逐个替换。

简单总结一下：LESS的&是完全继承父选择器的上下文，当你需要在状态选择器下引用独立的子类时，直接写出子类的完整名称（或通过变量生成），而不是继续用&拼接，就能得到你想要的嵌套结构啦。

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