SCSS中如何用父选择器优雅匹配多类名元素？

首先纠正你初始写法的核心问题：&--red的写法会编译成.parent > .child--red，和HTML里child child--red的结构不匹配。正确的单修饰类写法应该是&.child--red，编译后得到.parent > .child.child--red，才能匹配目标元素。

针对同时拥有两个修饰类的场景，以下两种方式可以避免重复书写基础类.child：

方案1：利用父选择器直接拼接 #

在.child的嵌套块中，&已经代表.parent > .child，直接通过&拼接两个修饰类即可实现需求，无需重复写.child：

.parent {
  & > .child {
    &.child--red {
      color: red;
    }
    &.child--green {
      color: green;
    }
    // 直接用&关联两个修饰类，无需重复写.child
    &.child--red.child--green {
      color: yellow;
    }
  }
}

编译后的原生CSS：

.parent > .child.child--red {
  color: red;
}
.parent > .child.child--green {
  color: green;
}
.parent > .child.child--red.child--green {
  color: yellow;
}

方案2：变量存储基础选择器（复杂场景适用） #

如果基础选择器包含复杂层级（比如多类名、伪类）或需要多次复用，可以用变量存储当前选择器，后续组合时直接引用，完全避免重复书写基础选择器：

.parent {
  & > .child {
    $base: &;
    
    #{$base}.child--red {
      color: red;
    }
    #{$base}.child--green {
      color: green;
    }
    #{$base}.child--red.child--green {
      color: yellow;
    }
  }
}

编译结果和方案1完全一致，这种写法在基础选择器更复杂时能大幅提升可维护性。

补充：初始写法无效的原因 #

你写的&--red.&--green会被SCSS编译成.parent > .child--red.parent > .child--green——因为&代表.parent > .child，&--red是直接在&末尾拼接--red，生成的选择器和HTML结构完全不匹配，自然无法选中目标元素。

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