Sass是否有语法可将独立类移入其他类的嵌套结构中？

问题描述 #

我在使用Sass时遇到嵌套类过多、维护不便的问题。现有Sass代码如下：

// sass input
.a {

}

.b {
   // some sass syntax here
   color: red;
}

我希望将.b类关联到.a类的嵌套结构下，最终编译出的CSS效果对应后代选择器结构（注：你给出的CSS输出示例写法不符合标准CSS语法，标准CSS不支持嵌套，正确编译结果应为.a .b { color: red; }）。请问Sass是否有对应的语法可以实现这一需求？

解决方案 #

当然可以，根据不同场景有两种常用实现方式：

方法1：直接调整代码结构（最直观） #

如果可以直接修改代码位置，直接将.b的代码块移动到.a的嵌套内部即可：

.a {
  .b {
    // some sass syntax here
    color: red;
  }
}

编译后生成标准CSS：

.a .b {
  color: red;
}

方法2：使用@at-root反向关联（适合无法直接移动代码的场景） #

如果.b定义在其他文件或代码段中，不想移动原代码，可通过@at-root结合父选择器&实现反向嵌套关联：

.b {
  @at-root .a & {
    // some sass syntax here
    color: red;
  }
}

编译后同样生成：

.a .b {
  color: red;
}

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