引用直接父母与＆amp;而不是绝对的父母

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）。一切都取决于你的确切情况（标记结构和完整的样式），这在我的例子中并不完全清楚。但我希望我至少给了你一些正确方向的想法。