Sass问题：如何使变量仅保留当前类，去除上级父选择器？

你遇到的核心问题是Sass里的&会捕获完整的父选择器链，而不仅仅是当前最内层的选择器。当你在.site-header .basket里赋值$basket: &时，变量实际存储的是.site-header .basket，所以后续嵌套展开时就会重复上级选择器，导致生成冗余的CSS。

下面给你两种可靠的解决方法，都能让$basket只保留当前的.basket类，避免重复编写类名：

方法1：使用selector-last函数（推荐，Sass 3.5+） #

Sass 3.5及以上版本提供了selector-last()函数，它可以直接提取选择器列表中的最后一个选择器，完美适配你的需求：

.site-header .basket {
  position: relative;
  &-container {
    width: 100%;
    padding: 0 18px;
  }
  // 只提取当前最内层的选择器 .basket
  $basket: selector-last(&);
  &.opened {
    #{$basket}-link {
      border: 1px solid #e5e5e5;
      border-bottom: 1px solid white;
    }
    #{$basket}-wrapper {
      visibility: visible;
      opacity: 1;
    }
  }
}

编译后生成的CSS就是你想要的：

.site-header .basket {
  position: relative;
}
.site-header .basket-container {
  width: 100%;
  padding: 0 18px;
}
.site-header .basket.opened .basket-link {
  border: 1px solid #e5e5e5;
  border-bottom: 1px solid white;
}
.site-header .basket.opened .basket-wrapper {
  visibility: visible;
  opacity: 1;
}

方法2：字符串处理兼容旧版Sass #

如果你还在使用低于3.5的Sass版本，可以通过字符串分割的方式手动提取最后一个选择器：

.site-header .basket {
  position: relative;
  &-container {
    width: 100%;
    padding: 0 18px;
  }
  // 将&转为字符串后按空格分割，取最后一段
  $basket-str: inspect(&);
  $basket: nth(split($basket-str, " "), -1);
  &.opened {
    #{$basket}-link {
      border: 1px solid #e5e5e5;
      border-bottom: 1px solid white;
    }
    #{$basket}-wrapper {
      visibility: visible;
      opacity: 1;
    }
  }
}

这个方法通过inspect()把选择器转为字符串，再用split()按空格拆分，最后用nth()取最后一个元素，同样能得到.basket类。

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