2

我知道在 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; }

请注意，这是一个简单的示例，在我的用例中，规则的嵌套比这要深得多。

4

3 回答 3

5

唯一的&作品向上一级。在您的代码示例中，您将无法获得您期望的代码。您需要以不同的方式处理它。

.foo {
    color: blue;
    a {
        color: red;
    }
    &.bar {
       a {
          color:green;
       }
    }
}
于 2013-03-29T14:28:06.637 回答
1

显然这仅使用 phpsass 编译器呈现，因此它是特定于编译器的。

只需在以下内容之前摆脱您的空间&：

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

编译为：

.foo {
  color: blue;
}

.foo a {
  color: red;
}

.bar.foo a {
  color: green;
}

请注意，.foo.barand.bar.foo是等效的选择器（仅当两个类都在项目上时它们才会进行选择），因此在这种情况下顺序无关紧要。现在，这是否可以在更深的嵌套结构（你声明你拥有）中工作，这一切都取决于你试图定位的目标，但基本上这会将一个类添加到最外层（你的.foo等价物），无论结构有多深.

于 2013-03-29T18:50:55.593 回答
-1

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

问题是您不需要放入a内部.foo来覆盖颜色。Ana不是直接从自己的属性中获取颜色.foo，而是从a自己的color属性中获取颜色。

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

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

所以一个最佳的解决方案是这样的： 

.foo {
  color: blue; }

a {
  color: red;

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

此外，您想要完全覆盖 for 的事实.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); }
于 2013-03-29T16:57:46.903 回答