相关疑难解决方法(0)

我的菜单中有样式链接的以下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 …

减

.list a{
    .landscape&{
        height: 100%;
    }
}

产出

.landscape.list a {
  height: 100%;
}

这意味着“其父母同时具有.landscape和.list的所有标签”

减

.list a{
    &.landscape{
        height: 100%;
    }
}

产出

.list a.landscape {
  height: 100%;
}

意思是“所有具有“ landscape”类且其父母具有“ .list”类的标签”

这是有道理的。但是，如果我从这些选择器中删除“ a”标记，则“＆”仅更改.list和.landscape的串联顺序。

重点是什么 ？什么时候应该使用＆.class？什么时候应该使用class。＆？