如何在SCSS中无需重复父选择器&，为类内多选择器添加作用域？

纯 SCSS 里没法完全做到「零修改原有 CSS 选择器」就生成你要的交集选择器，但有两种折中的方案能满足核心需求：

方案一：SCSS 原生写法（改动极小） #

只需要给原有每个类选择器的开头添加 #{&}，就能快速生成交集选择器，样式内容完全不用改：

.scope {
  @at-root #{&}.foo {
    color: red;
  }
  @at-root #{&}.bar {
    color: blue;
  }
}

编译后输出的 CSS 就是你想要的：

.scope.foo {
  color: red;
}
.scope.bar {
  color: blue;
}

这种方式的改动只是给每个选择器加一段前缀代码，几乎不影响原有 CSS 的结构。

方案二：用 PostCSS 批量处理（完全不用改原有 CSS） #

如果你的 CSS 代码量很大，不想逐个修改选择器，可以用 PostCSS 的 postcss-prefix-selector 插件实现批量转换：

1. 安装插件：npm install postcss-prefix-selector --save-dev
2. 在 PostCSS 配置文件里添加以下配置：

module.exports = {
  plugins: [
    require('postcss-prefix-selector')({
      prefix: '.scope',
      transform: (prefix, selector) => {
        // 针对类选择器生成交集，其他选择器生成后代关系（按需调整）
        return selector.startsWith('.') ? `${prefix}${selector}` : `${prefix} ${selector}`;
      }
    })
  ]
};

之后你可以直接写原有 CSS 代码，经过 PostCSS 处理后就会自动生成带 .scope 前缀的交集选择器。

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