如何在Sass中实现类似Stylus的^[N]选择器部分引用功能

Stylus 中的^[N]语法用于提取父选择器中指定位置的分段，Sass 可以通过内置的selector模块函数完全实现同等效果，具体用法如下：

核心用法 #

Sass 提供selector.nth()函数用于提取父选择器的指定分段，注意该函数索引从1开始计数，负索引从最后一位倒序计算，和Stylus的0起始索引仅差1位，对应调整索引即可使用。

示例代码：

// 先导入sass内置的selector模块
@use "sass:selector";

.wrap .box .text {
  // 等同于 Stylus ^[0]，提取第1个选择器分段 .wrap
  #{selector.nth(&, 1)}::before {
    content: "前缀提示";
    color: #999;
  }

  // 等同于 Stylus ^[1]，提取第2个选择器分段 .box
  #{selector.nth(&, 2)}:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  }

  // 等同于 Stylus ^[-1]，提取最后1个选择器分段 .text
  #{selector.nth(&, -1)} {
    font-size: 14px;
    line-height: 1.5;
  }
}

上述代码编译后输出：

.wrap .box .text {}

.wrap::before {
  content: "前缀提示";
  color: #999;
}

.box:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.text {
  font-size: 14px;
  line-height: 1.5;
}

复杂嵌套场景处理 #

如果存在多层嵌套、选择器拼接的场景，也可以配合selector.split()拆分选择器后按需处理：

@use "sass:selector";

.user {
  &-card .info .name {
    // 提取最外层的 .user-card 分段
    #{selector.nth(&, 1)} {
      border: 1px solid #eee;
      border-radius: 4px;
    }
  }
}

编译后输出：

.user-card .info .name {}

.user-card {
  border: 1px solid #eee;
  border-radius: 4px;
}

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