指南针susy列没有排水沟？

Question

我有一个完美的网格，除了我希望导航中的列相互对接。这是桌面上的24列魔术网格，每个导航项目都是4/24。如果我尝试负边距，它们不再跨越导航栏的整个宽度，它们向左滑动并留下一个洞（最后一项是欧米茄）。这可以用列来完成，还是我只需要在没有栏的情况下完成导航栏？在这个截图中，我将它们全部涂成灰色以使其显而易见：

Answer 1

如果你不需要排水沟，你不需要Susy的帮助 - 数学很简单：

.nav-item {
  float: left;
  width: percentage(4/24);
}

就是这样，但正如您所注意到的，由于子像素舍入，在某些浏览器中会留下额外的空间。除了学习围绕它设计外，没有简单的子像素舍入解决方案。 Susy将最后一列向右漂浮，因为它更容易隐藏内部空间而不是边缘。

你的other option有点hacky，让你更接近（但不是全程）。通过向左拉齐所有列，您可以将它们推回原位，而不会使舍入误差加起来。这样你就不会有超过1px的差距：

.nav-item {
  float: left;
  width: percentage(4/24);

  // pull things flush left
  margin-right: -100%;

  // push things back into place
  @for $i from 1 through 6 {
    &:nth-child(#{$i}) { margin-left: percentage(($i - 1)*4/24); }
  }
}

当然，如果您支持旧浏览器，则可以使用类代替：nth-​​child。如果您正在进行任何类型的响应式设计，这是您可以做的最好的。使用响应式设计无法完全避免子像素舍入。我强烈建议学习如何设计。

Answer 2

Eric Meyer非常棒，以至于他现在包含了一些可以帮助你解决这个问题的东西史蒂夫 - 在最新版本的Susy中看看bleed。

我相信这可以帮助您解决问题。它允许您执行以下操作：

.nav-item {
  ...
  @include bleed(1 of 4);
}

彻底阅读the update to susy with isolate & bleed

希望有所帮助！感谢Eric在Susy上做了这么棒的工作:)