没有排水沟的指南针 susy 列？答案

【问题标题】：Compass susy columns with no gutters?没有排水沟的指南针 susy 列？
【发布时间】：2013-03-21 23:19:37
【问题描述】：

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

【问题讨论】：

我让它像这样工作，但它当然没有响应，所以我宁愿用原来的方式：`li { width: (4*$column-width) + (4*$gutter-width); float: left; height: 105px; // @include span-columns(4,24); border-right: 1px solid #ccc; &.first { @include border-top-left-radius($radius); margin-left: - $grid-padding; } &.last { // @include span-columns(4 omega, 24); border-right: none; @include border-top-right-radius($radius); margin-right: - $grid-padding; } }

标签： css compass-sass susy-compass

【解决方案1】：

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

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

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

你的other option 有点老套，让你离你更近（但不是全程）。通过将所有列拉向左对齐，您可以将它们推回原位，而不会让舍入误差累加。这样你的差距永远不会超过 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。如果你正在做任何类型的响应式设计，这是你能做的最好的。响应式设计无法完全避免亚像素舍入。我强烈建议学习围绕它进行设计。

【讨论】：

谢谢。出于某种原因，我不知道百分比函数。
是的。谢谢。不幸的是，我不断得到 PSD 设计的响应式效果不佳，但我必须想办法实现它。我会尝试这些想法。

【解决方案2】：

Eric Meyer 太棒了，他现在包含了一些可以帮助您解决这个问题的东西 Steve - 看看最新版本的 Susy 中的bleed。

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

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

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

希望对您有所帮助！并感谢 Eric 在 Susy 上做得如此出色:)

【讨论】：