CSS转LESS重构疑问：如何简化.tax-included相关选择器？

你需要的是后代选择器，之前的写法错误在于误用了&的拼接逻辑，以下是两种正确的简化写法：

方法一：使用变量存储基类名 #

这种方式可读性高，适合后续可能复用基类名的场景：

@baseClass: tax-included;

.@{baseClass} {
  .@{baseClass}-show {
    display: none;
  }
}

编译后会生成目标CSS：

.tax-included .tax-included-show {
  display: none;
}

方法二：直接通过&插值生成后代选择器 #

利用LESS的选择器插值特性，直接引用当前父选择器的名称：

.tax-included {
  .@{&}-show {
    display: none;
  }
}

编译结果和上面一致。

为什么你之前的写法不对？ #

• 第一种写法&-show：&会直接和-show拼接，生成.tax-included-show（而非后代选择器），最终编译出.tax-included-show { display: none; }，不符合需求。
• 第二种写法> &-show：仅添加了子选择器符号>，本质还是拼接出.tax-included-show，编译结果为.tax-included > .tax-included-show { display: none; }，也和原CSS结构不符。

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