SCSS多ID嵌套类选择器写法疑问：编译结果未达预期

我希望编译后的CSS效果如下：

#template1 .heroText, #template2 .heroText { text-align:center; }
#template3 .heroText, #template4 .heroText { text-align:left; }

我尝试了下面的SCSS写法（用逗号分隔多个ID后嵌套类选择器），但似乎没有生效：

#template1, #template2{
  .heroText { text-align:center; }
}
#template3, #template4{
  .heroText { text-align:left; }
}

请问这个写法是否正确？或者有没有其他在SCSS中选中多个ID下相同类的方法？

你的SCSS写法完全正确，它编译后就是你想要的目标CSS代码。如果没有生效，大概率是你的SCSS编译工具配置出了问题，或者编译过程中出现了未被注意的错误——你可以把这段代码放到任意在线SCSS编译器中测试，都会输出你期望的结果。

如果想让代码更简洁、易维护（尤其是需要处理更多ID的时候），可以试试这些优化写法：

1. 用@each循环批量生成样式
   如果你的ID有规律（比如都是template加数字），循环能大幅减少重复代码：

// 处理居中对齐的模板
@each $num in 1, 2 {
  #template#{$num} .heroText {
    text-align: center;
  }
}

// 处理左对齐的模板
@each $num in 3, 4 {
  #template#{$num} .heroText {
    text-align: left;
  }
}

2. 用占位符选择器+@extend实现样式复用
   如果多个选择器共享相同样式，先定义占位符再继承的方式更清晰：

%center-text {
  text-align: center;
}

%left-text {
  text-align: left;
}

#template1 .heroText, #template2 .heroText {
  @extend %center-text;
}

#template3 .heroText, #template4 .heroText {
  @extend %left-text;
}

3. 基于父选择器&的反向嵌套写法
   这种写法把.heroText作为基础选择器，再指定不同的父ID，编译结果和你想要的完全一致：

.heroText {
  #template1 &, #template2 & {
    text-align: center;
  }
  #template3 &, #template4 & {
    text-align: left;
  }
}

总结来说：你最初的写法本身没有问题，优先检查编译工具的运行状态；如果需要优化代码结构，上面的几种方法都可以尝试。

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