Sass嵌套编写CSS时如何正确引用指定层级的父元素？

抱歉我的问题标题表述较为模糊，也欢迎大家提供优化建议。我此前检索过同类问题，但没有找到和我需求完全匹配的内容。

目标实现效果 #

需要编译得到如下原生CSS：

nav a {
    color: blue;
}

nav li.selected a {
    color: red;
}

预期嵌套形式 #

我的需求是选中作为li.selected子元素的a标签（即在嵌套结构中引用当前选择器恰好高一层的指定父元素），期望保持如下嵌套结构，在???位置填写正确选择器：

nav {
  a {
    color: blue;

    ??? {
      color: red;
    }
  }
}

已尝试的无效写法 #

我已经试过两种写法，都没有得到预期结果：

• 第一种写法

nav {
  a {
    color: blue;

    li.selected & {
      color: red;
    }
  }
}

编译结果为li.selected nav a，不符合预期的nav li.selected a。

• 第二种写法

nav {
  $foo: &;
  a {
    color: blue;

    @at-root #{$foo} li.selected & {
      color: red;
    }
  }
}

编译结果为nav li.selected nav a，不符合预期的nav li.selected a。

推荐方案 #

首先说明Sass的核心规则：嵌套块内的&永远代表当前层级对应的完整选择器串，在a的嵌套块中，&的值固定为nav a，原生没有提供直接“仅获取上一级父选择器”的语法糖。

• 方案1：最推荐的最简写法（可读性最高）
  Sass不推荐过度嵌套，不需要强行把所有相关规则都塞到最深的嵌套块里，保持结构清晰、编译结果准确的最简写法如下：

nav {
  a {
    color: blue;
  }

  li.selected a {
    color: red;
  }
}

• 方案2：严格匹配预期嵌套结构的写法
  如果必须把红色样式规则写在a的嵌套块内部，可以使用Sass内置的选择器函数实现，新版Sass需要先引入sass:selector模块：

@use 'sass:selector';

nav {
  a {
    color: blue;

    @at-root #{selector.replace(&, 'a', 'li.selected a')} {
      color: red;
    }
  }
}

该写法编译结果完全符合预期，原理是将当前完整选择器nav a中的a替换为li.selected a，最终得到nav li.selected a。
注意：如果你的项目还在使用旧版Sass（不支持模块系统），可以去掉@use引入语句，直接调用selector-replace()函数即可。

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