用 & 引用直接父级而不是绝对父级

Question

对于这个 SASS：

@mixin sameHeight($multiplier){
    height:367px + 21px * $multiplier;
}

.page{
  .inner{
    @for $i from 1 through 3{
       .compare-#{$i} &{ @include sameHeight($i); };
    }
  }
}

我明白了：

.compare-1 .page .inner {
  height: 215px;
}
.compare-2 .page .inner {
  height: 250px;
}
.compare-3 .page .inner {
  height: 285px;
}

但我想要这个：

.page .compare-1 .inner {
  height: 215px;
}
.page .compare-2 .inner {
  height: 250px;
}
.page .compare-3 .inner {
  height: 285px;
}

基本上& 只是将compare 类添加到绝对最顶层的父级，这不是我想要发生的事情。

Answer 1

& 符号 (&) 是嵌套规则（在您的情况下为 .page .inner）的父选择器的整个路径的占位符。所以它总是会在嵌套选择器和not just the immediate parent的任何位置插入所有嵌套选择器/级别。

这是一个很好的article with some examples，展示了如何在 Sass 中充分利用 & 符号。

您可以改为这样做（如果 .inner 代表 .compare... 类的子级）：

.page{
    @for $i from 1 through 3{
       .compare-#{$i} .inner { @include sameHeight($i); };
    }
}

DEMO

---

<sup>- 也许您会在有关此主题的其他 SO Q/A 中找到有用的东西，请参阅：[Sass] ampersand。
- 相关issue on Github.</sup>

---

编辑：

既然你在下面的评论中说你想用一个 mixin 应用这个 - 你可以使用一个额外的 compare mixin，它只是围绕 .inner 内容构造选择器，然后你可以在其中添加你的 sameHeight财产。大致如下：

@mixin compare {
  @for $i from 1 through 3 {
    .compare-#{$i} {
      $m: $i;
      @content;
    }
  }
} $m: 0;

.page{
  @include compare {
    .inner {
      @include sameHeight($m);
    }
  }
}

DEMO

您也可以在同一元素/标签上使用.compare... 和.inner 类，这将消除第二级嵌套的问题 (DEMO)。或者不使用嵌套规则，您可以从变量构造分层选择器（您甚至可以将 & 值保存在变量中 - DEMO）。然后，一切都取决于您的确切情况（标记结构和完整的样式），从您的示例中我并不完全清楚。但我希望我至少给了你一些正确方向的想法。