SASS主题包裹代码中使用&符号编译异常的修复方法

你的问题根源在于**$root: &存储了包含外层主题选择器的完整链**，当在&--red内部引用时，SASS会把逗号分隔的每个父选择器都重复拼接，导致生成了冗余的选择器组合。

修复方案1：提取基础选择器变量 #

最直观的方法是把.popup这个基础选择器单独提取成变量，避免引用包含外层主题的完整选择器链：

$popup-base: popup;

.black-theme, .light-theme {
  .#{$popup-base} {
    color: red;
    &--red {
      .#{$popup-base}__close-button {
        fill: red;
      }
    }
  }
}

编译后会得到你期望的结果：

.black-theme .popup, .light-theme .popup {
  color: red;
}
.black-theme .popup--red .popup__close-button, .light-theme .popup--red .popup__close-button {
  fill: red;
}

修复方案2：直接写出目标选择器（简洁版） #

如果你不需要动态复用选择器，直接在&--red内部写出目标选择器是最简洁的方式：

.black-theme, .light-theme {
  .popup {
    color: red;
    &--red {
      .popup__close-button {
        fill: red;
      }
    }
  }
}

这种方法结构清晰，编译结果和方案1完全一致。

为什么原代码会生成冗余选择器？ #

当你在.popup内部执行$root: &时，&代表的是整个父选择器链：.black-theme .popup, .light-theme .popup。当你在&--red（即.popup--red）内部引用#{$root}__close-button时，SASS会对每个逗号分隔的选择器进行逐一拼接：

• .black-theme .popup--red + .black-theme .popup__close-button → .black-theme .popup--red .black-theme .popup__close-button
• .black-theme .popup--red + .light-theme .popup__close-button → .black-theme .popup--red .light-theme .popup__close-button
• 同理处理.light-theme .popup--red的两种组合，最终生成了4个完全冗余的选择器。

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