1

对于这个 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类添加到绝对最顶层的父级，这不是我想要发生的事情。

4

1 回答 1

3

与号( &) 是嵌套规则的父选择器的整个路径的占位符.page .inner（在您的情况下）。因此，它总是将所有嵌套选择器/级别插入到嵌套选择器中的任何位置，而不仅仅是直接父级。

这是一篇很好的文章，其中包含一些示例，展示了如何在 Sass 中充分利用 & 符号。

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

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

演示

- 也许你会在关于这个主题的其他 SO Q/A 中找到有用的东西，请参阅：[Sass] & 符号。
- Github 上的一个相关问题。

编辑：

由于您在下面的评论中说您想将其与 mixin 一起应用 - 您可以使用一个额外的comparemixin，它只是围绕.inner内容构建选择器，然后您可以在其中添加您的sameHeight属性。这些方面的东西：

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

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

演示

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

于 2013-11-13T15:45:15.343 回答