SASS嵌套多选择器结合@at-root body.home的空格保留问题

我之前也踩过类似的坑——selector-append确实会直接拼接选择器字符串，完全忽略原嵌套结构里的空格，导致生成的选择器变成body.home.slider__container这种错误的交集形式，而不是我们想要的父子层级关系。

这里有个更合适的解法：改用Sass的selector-nest()函数，它专门用来处理选择器的嵌套逻辑，会自动保留必要的空格，完美适配你的需求。

修改后的代码示例 #

把所有用到selector-append('body.home', &)的地方替换成selector-nest('body.home', &)即可：

.slider__container {
  &.--media {
    .slider {
      .slide {
        img, video {
          max-height: calc(100% - (30px * 4) - (28px * 2));
          max-width: calc(100% - 60px);
          @at-root #{selector-nest('body.home', &)} {
            max-height: calc(100% - (65px * 4) - (28px * 2));
            transition: transform 400ms, filter 400ms;
            transform: scale(0.8);
          }
          @include media(tablet-p) {
            max-height: calc(100% - (20px * 4) - (28px * 2));
            max-width: calc(100% - 40px);
            @at-root #{selector-nest('body.home', &)} {
              max-width: calc(100% - 100px);
            }
          }
          @include media(phone) {
            max-height: calc(100% - (20px * 4) - (28px * 2));
            max-width: calc(100% - 40px);
            @at-root #{selector-nest('body.home', &)} {
              max-height: calc(100% - (65px * 4) - (24px * 2));
              max-width: calc(100% - 50px);
              transform: scale(0.7);
            }
          }
        }
      }
    }
  }
}

为什么这个方法管用？ #

• selector-append()的核心作用是追加选择器，比如selector-append('.a', '.b')会生成.a.b（交集选择器），它不会考虑选择器之间的层级关系；
• 而selector-nest()的核心作用是嵌套选择器，比如selector-nest('.a', '.b .c')会生成.a .b .c（父子层级选择器），正好匹配你需要的结构。

修改后编译出的CSS会完全符合你的预期：

body.home .slider__container.--media .slider .slide img,
body.home .slider__container.--media .slider .slide video {
  max-height: calc(100% - (65px * 4) - (28px * 2));
  transition: transform 400ms, filter 400ms;
  transform: scale(0.8);
}
/* 其他媒体查询下的样式也会正确生成对应的层级选择器 */

如果你的Sass版本较低（低于3.4），selector-nest()可能不可用，那可以用替代方案：手动拆分&对应的多个选择器，用@each遍历处理，但显然selector-nest()是最简洁优雅的解法。

内容的提问来源于stack exchange，提问作者John the Painter