SCSS转译CSS时如何移除子元素上多余的顶层根类.abc

问题根源 #

你将&赋值给$root时，当前嵌套上下文的&已经是包含外层.abc的完整选择器.abc .slider，后续每次插值#{$root}时都会把完整选择器代入，因此每一层子选择器都会带上多余的.abc。

解决方案 #

方案1：单独定义基础类名变量（最直观易维护） #

直接将滑块的基础类名声明为独立变量，不携带父级上下文，代码示例：

.abc{
  $slider-base: ".slider";
  #{$slider-base} {
    &--fade {
      > #{$slider-base}__track {
        > #{$slider-base}__list {
          > #{$slider-base}__slide {
            .rh08w5 {
              opacity: 0;
              h2 {
                opacity: 0;
              }
            }
          }
        }
      }
    }
  }
}

转译后输出完全符合预期。

方案2：用选择器处理函数提取基础类名 #

如果不想单独声明类名变量，可以用SCSS内置的selector.nth()函数提取&中的最后一段选择器，自动剥离外层的.abc：

.abc{
  .slider {
    $root: &;
    // 取选择器的最后一段，仅保留.slider
    $base-slider: selector.nth($root, -1);
    &--fade {
      > #{$base-slider}__track {
        > #{$base-slider}__list {
          > #{$base-slider}__slide {
            .rh08w5 {
              opacity: 0;
              h2 {
                opacity: 0;
              }
            }
          }
        }
      }
    }
  }
}

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