SCSS附加到子进程的根选择器

Question

我知道在SCSS中我可以这样做:

.foo {
    color: blue;
    a {
        color: red;
        .bar & { color: green; }
    }
}

得到这个:

.foo { color: blue; }
.foo a { color: red; }
.bar .foo a { color: green; }

但有没有办法追加该选择器,导致:

.foo { color: blue; }
.foo a { color: red; }
.foo.bar a { color: green; }

请注意,这是一个简单的示例,在我的用例中,规则嵌套比这更深.

Answer 1

在&只能一个级别.在您的代码示例中,您将无法获得预期的代码.你需要以不同的方式处理它.

.foo {
    color: blue;
    a {
        color: red;
    }
    &.bar {
       a {
          color:green;
       }
    }
}