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

Answer 2

显然是only renders with phpsass compiler，因此它是特定于编译器的。

在&：

之前摆脱你的空间

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

编译为：

.foo {
  color: blue;
}

.foo a {
  color: red;
}

.bar.foo a {
  color: green;
}

请注意，.foo.bar和.bar.foo是等效的选择器（只有当两个类都在项目上时它们才会进行选择），因此在这种情况下顺序无关紧要。现在，这是否可以在更深层次的嵌套结构中工作（你声明你有），这完全取决于你想要定位的内容，但实质上这会将一个类添加到最外面的级别（你的{无论结构有多深，都等同于{1}}。

Answer 3

你有一个XY problem。你需要覆盖a的颜色，但不是要求最佳的方法来做到这一点，你发明了一些奇怪的结构，并问为什么它不起作用。

问题在于您无需将a置于.foo内以覆盖颜色。 a的颜色不是直接来自.foo，而是来自a自己的color属性。

默认情况下，color设置为inherit，它自然地从父级继承。因此，要覆盖a的颜色，可以将color属性从inherit更改为您想要的任何内容。为此，您不需要将父项放入选择器！

UPD ：由于 cimmanon 已在下面更正了我，a的颜色不会从父级继承，而是使用自己的默认值。

因此，最佳解决方案是：

.foo {
  color: blue; }

a {
  color: red;

  .foo.bar & {
    color: green; } }

此外，您要完全覆盖.foo.bar a的事实表明您过度复杂化了。

如果您需要处理四种不同情况，则只需.foo.bar a：a，.foo a，.bar a和.foo.bar a。你真的有这么多不同的颜色链接？为什么呢？

你当然可以重构HTML结构，使其更具语义性，并对这样的代码感到满意：

a {
  color: red; }

#header {
  color: blue; }

.cart-item 
   & a {
    color: green; } }

使用此代码，链接只能是两种不同的颜色：购物车商品为绿色，其他商品为红色。

如果您有充分理由拥有多种颜色，请考虑使用mixin：

@mixin link-with-color($color: red) {
  a {
    color: $color; } }

#header {
  @include link-with-color(blue); }

.cart-item {
  @include link-with-color(green); }

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

3 个答案: