在多个断点处使用Susy的isolate-grid()

Question

我尝试在多个断点使用不同的isolate-grid()设置，如下所示：

标记：

<div class="boxes">
  <div class="box">
    Box 1
  </div>
  <div class="box">
    Box 2
  </div>
  <div class="box">
    Box 3
  </div>
  <div class="box">
    Box 4
  </div>
  <div class="box">
    Box 5
  </div>
  <div class="box">
    Box 6
  </div>
</div>

萨斯：

$total-columns: 4;
$column-width: 60px;
$gutter-width: 40px;
$grid-padding: $gutter-width / 2;
$container-style: fluid;
$container-width: 940px;

%container {
  $include container;

    @include at-breakpoint(9) {
      @include set-container-width;
    }

    @include at-breakpoint(12) {
      @include set-container-width;
    }
}

.boxes
  @extend %container;

  .box {
    @include isolate-grid(2);

    @include at-breakpoint(9) {
      @include isolate-grid(3,9);
    }

    @include at-breakpoint(12) {
      @include isolate-grid(4,12);
    }
  }
}

然而，即使列跨度按预期调整，omegas似乎没有正确重置，因此一些框被清除，并且不出现在同一行上。

我确信我错过了一些明显的东西，但我已经绕了很长时间了！我已经尝试添加了reset-omega()和reset-columns()的各种组合，但还没有添加joy。

有什么办法让我摆脱痛苦吗？！

致以敬意，

马特。

Answer 1

这是一个非常好的观点。您应该能够简单地在下一个断点处使用正确的第n个选择器添加一个clear: none;覆盖。Susy使用Xn + 1格式，其中"X“是一行中的项目数。在您的情况下，这应该可以做到：

.boxes {
  @extend %container;

  .box {
    @include isolate-grid(2);

    @include at-breakpoint(9) {
      // 2n + 1 because the smaller grid had 2 items in each row
      &:nth-child(2n + 1) { clear: none; }
      @include isolate-grid(3,9);
    }

    @include at-breakpoint(12) {
      // no override needed, because the smaller grid also had 3 per row
      @include isolate-grid(4,12);
    }
  }
}

实际上，确定如何在Susy中“修复”它有点棘手，但您提出它是对的--我们当然应该寻找一个更干净的解决方案。你介意在GitHub上提交一个问题吗？谢谢!

Answer 2

感谢你的变通方法，它与我在尝试isolate-grid()之前使用的类似，但我是这样做的(我相信它实现了相同的功能)：

.box {
  @include span-columns(2);
  @include nth-omega(2n); // every second item completes a row.

  @include at-breakpoint(9) {
    @include span-columns(3,9);
    @include remove-nth-omega(2n);
    @include nth-omega(3n); // every third item completes a row.
  }

  @include at-breakpoint(12) {
    @include span-columns(4,12);
    @include remove-nth-omega(2n);
    @include nth-omega(3n); // every third item completes a row.
  }
}

有兴趣知道哪种方式更有效/更可取，还是它们都编译成相同的CSS？

Answer 3

这肯定是isolate-grid()的一个bug。我已经将问题隔离为，第一个isolate-grid()调用将clear: left；应用于行的结束项。

然而，在下一个断点处，在下一次isolate-grid()调用之前，尝试添加clear: none；绝对没有做任何事情。

我不得不回到第n个子代声明，直到他们可以修复这个bug。如果有人需要一个变通方法，这就是使用第n个子选择器的方法：

.box {
  @include span-columns(2);

  @include at-breakpoint(9) {
    @include span-columns(3,9);

    &:nth-child(3n) {
      @include span-columns(3 omega,9);
    }
  }

  @include at-breakpoint(12) {
    @include span-columns(4,12);

    &:nth-child(3n) {
      @include span-columns(4 omega,12);
    }
  }
}