css - 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;
       }
    }
}