Sass占位符扩展后如何获取直接父选择器而非完整路径

你遇到的问题核心是**@extend会将占位符中的嵌套选择器与继承它的外层选择器完全合并**，导致你定义的$parent变量包含了完整的.l-cap .c-slider，最终编译出重复的.l-cap选择器。

问题原因拆解 #

你的原始代码中：

%slider {
  .c-slider {
    $parent: &; // 当.l-cap @extend %slider后，&会变成 .l-cap .c-slider
    &--thumb {
      #{$parent}__item{ margin:0; } // 这里就变成了 .l-cap .c-slider__item
    }
  }
}
.l-cap { @extend %slider; }

嵌套后最终选择器就是.l-cap .c-slider--thumb .l-cap .c-slider__item，这就是重复的来源。

解决方案：提取目标父选择器而非完整嵌套链 #

我们需要从$parent中只提取.c-slider这部分，而不是包含外层的.l-cap，可以用Sass的selector-last()函数来实现：

%slider {
  .c-slider {
    $parent: &;
    &--thumb {
      // 用selector-last获取嵌套链的最后一个选择器（也就是.c-slider）
      #{selector-last($parent)}__item {
        margin: 0;
      }
    }
  }
}

.l-cap {
  @extend %slider;
}

编译后就能得到你期望的结果：

.l-cap .c-slider--thumb .c-slider__item {
  margin: 0;
}

另一种更直接的写法（适合固定类名场景） #

如果.c-slider的类名是固定的，也可以直接在&--thumb中写目标选择器，不用变量：

%slider {
  .c-slider {
    &--thumb {
      .c-slider__item {
        margin: 0;
      }
    }
  }
}

.l-cap {
  @extend %slider;
}

这种写法更简洁，但通用性稍弱，适合类名不会频繁变动的场景。

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