在Sass中修改选择器的中间（添加/删除类等）

Question

在Sass中修改选择器的中间（添加/删除类等）

我的菜单中有样式链接的以下SCSS：

nav {
    ul {
        li {
            a {
                color: red
            }
        }
    }
    ul.opened {
        li {
            a {
                color: green
            }
        }
    }}

这会产生以下（正确的）CSS：

nav ul li a {
  color: red;}nav ul.opened li a {
  color: green;}

我尝试修改我的JavaScript以将类应用于nav元素，并selector-append()在Sass中使用它来附加类。但这似乎以错误的顺序进行追加（如果参数反转，则该类将附加到最后一个元素！）：

nav {
    ul {
        li {
            a {
                color: red;
                @at-root #{selector-append('.opened', &)} {
                  color: green;
                }
            }
        }
    }}

输出（不正确！）：

nav ul li a {
  color: red;}.openednav ul li a {
  color: green;}

有没有一种方法可以重写SCSS，以便可以正确附加类，而不必重复选择器（类似于selector-append()方法）？