1

我正在尝试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);
    }
  }
}

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

我确定我错过了一些明显的东西，但我已经转了好久了！我试过添加各种组合，reset-omega()但reset-columns()还没有快乐。

有什么想法可以让我摆脱痛苦吗？！

问候，

马特。

4

3 回答 3

1

这是一个很好的观点。您应该能够clear: none;在下一个断点处使用正确的第 n 个选择器简单地添加覆盖。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 上提交问题吗？谢谢！

于 2013-04-30T22:12:01.097 回答
1

感谢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？

于 2013-05-01T11:24:34.790 回答
0

这绝对是isolate-grid() 的一个错误。我已将问题隔离为第一个 isolate-grid() 调用应用 clear: left; 到行的结尾项。

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

我不得不回到第 n 个孩子的声明，直到他们可以修复这个错误。如果有人需要解决方法，您可以使用 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);
    }
  }
}
于 2013-04-30T20:37:01.980 回答