sass - 在 Susy 画廊中，我需要将第一个元素跨越前两个画廊列

Question

已经提出了另一个非常相似的问题。

我设置了一个由六列元素组成的画廊。但是我希望第一个元素跨越画廊的前两列。

$deskcol : 12;

.colSixth {
  @include gallery(2 of $deskcol);
}

.colSixth.strap {
  ??
}

<div class="colSixth strap">
   content should span two Sixths
</div>
<article class="colSixth">
    content spans one sixth
</article>
<article class="colSixth">
    content spans one sixth
</article>
<article class="colSixth">
    content spans one sixth
</article>
<article class="colSixth">
    content spans one sixth
</article>

有没有办法将gallery功能抵消两个？我试过隔离它。而且我在.strap元素上添加了额外的填充，但是它将第一行画廊推出并离开页面。甚至尝试&:first-child了各种口味的选择器。

Answer 1

您只希望第一项跨越两列吗？在这种情况下，您可能不想使用画廊功能（改用 span）。

为简单起见，您可能还想将排水沟切换到内部。

您可以这样做：

.colSixth {
  @iinclude span(2 of 12 inside); 

  &:first-child {
    @include span(4 of 12 inside); 
  }
}

试试看，让我知道。

Answer 2

我从来没有用某种 Susy 画廊偏移规则真正解决过这个问题。相反，我求助于将每对<article>元素包装在 a 中.colThird并将两个.colSixth元素嵌套在其中。

.colThird {
   @include gallery(4 of $deskcol);
}

.colSixth {
   @include span(2 of 4);
   &:last-child {
    @include omega;
   }
}

<div class="colThird">
   <div class="colSixth strap">
      content should span two Sixths
   </div>
</div>

<div class="colThird">
   <article class="colSixth">
       content spans one sixth
   </article>
   <article class="colSixth">
       content spans one sixth
   </article>
</div>