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>

SASS：

$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()的各种组合，但目前尚无欢乐。

任何让我摆脱痛苦的想法？！

此致

太

Answer 1

这是一个非常好的观点。您应该能够在下一个断点处使用正确的nth-selector简单地添加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

感谢Brett的解决方法，它与我在尝试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（）的一个错误。我已经将问题隔离为第一个isolate-grid（）调用应用了clear：left;到该行的结束项目。

但是，尝试添加clear：none;在下一个断点处，在下一个isolate-grid（）调用之前完全没有做任何事情。

我必须回到n-child声明，直到他们能解决这个bug。如果有人需要解决方法，这就是你用nth-child选择器做到这一点的方法：

.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);
    }
  }
}

在多个断点处使用Susy的isolate-grid（）

3 个答案: