SCSS前置父选择器实现：如何为父选择器添加game-前缀？

嘿，我懂你要实现的效果——把遗留的.promo和.game-promo用SCSS的嵌套语法整合，让.game-promo作为.promo的带前缀变体。你之前的写法game-&不生效，是因为SCSS里&的工作方式：它会直接拼接在你写的内容后面，最终生成game-.promo（这是一个game-元素搭配.promo类，完全不是你要的.game-promo）。

下面给你两种可行的实现方案，适配不同的场景：

方案一：用SCSS字符串替换函数直接修改父选择器 #

这种方法最直接，利用SCSS的replace()字符串函数，把父选择器.promo替换成.game-promo，完美实现嵌套写法：

.promo {
  display: flex;

  // 替换父选择器的前缀部分
  #{replace(&, '.promo', '.game-promo')} {
    color: black;
  }
}

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

.promo {
  display: flex;
}
.game-promo {
  color: black;
}

方案二：用混合宏（Mixin）封装，适配多前缀场景 #

如果你的项目里以后可能会出现更多类似的前缀变体（比如.app-promo、.shop-promo），用混合宏来封装会更灵活，方便后续扩展：

// 定义一个生成promo变体的混合宏
@mixin promo-variant($prefix) {
  .#{$prefix}-promo {
    @content;
  }
}

.promo {
  display: flex;

  // 生成.game-promo的样式
  @include promo-variant('game') {
    color: black;
  }

  // 以后新增变体只需加一行
  @include promo-variant('app') {
    color: blue;
    border: 1px solid #eee;
  }
}

编译后会生成：

.promo {
  display: flex;
}
.game-promo {
  color: black;
}
.app-promo {
  color: blue;
  border: 1px solid #eee;
}

额外说明：为什么你的原始写法不生效 #

再明确一下：当你在.promo内部写game-&时，SCSS会把&直接替换成父选择器的完整字符串.promo，所以最终生成的选择器是game-.promo——这是一个匹配<game- class="promo">这种元素的选择器，完全不符合你的需求，所以必须用字符串处理或者混合宏的方式来修改选择器结构。

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