如何在列之间获得 1px 边框？答案

【问题标题】：How to get a 1px border between columns?如何在列之间获得 1px 边框？
【发布时间】：2013-02-05 02:07:19
【问题描述】：

在装订线中心的两个 Susy 网格项目之间绘制 1px 边框的首选/最干净的方法是什么？

Susy 通过向网格项目添加边距右来创建排水沟，因此我不能简单地添加右边框（例如，您可以使用Zen Grids，它通过在两侧应用半个排水沟宽度的填充来创建排水沟）。

我想这可以使用with-grid-settings() mixin 来定义一个没有排水沟的替代网格，但这感觉像是一个混乱的解决方案。

【问题讨论】：

【解决方案1】：

目前没有很好的解决方案，但我希望在下一个主要版本中提供一个。您可以做的是使用 Susy 函数（真的是 Susy 最强大的部分）创建自己的数学。像这样的：

.left-column {
  @include box-sizing(border-box);
  float: left;
  width: columns(2) + gutter()/2;
  padding-right: gutter()/2;
  margin-right: gutter()/2;
  border-right: 1px solid;
}

【讨论】：

谢谢埃里克。尽管这不是我所希望的极其简单的防白痴解决方案，但很高兴读到它正在考虑中。如果我在 github 上打开正式的功能请求会有帮助吗？
正式请求总是有帮助的。 :) 问题是：一旦我们开始为每一个边缘情况添加非常简单的解决方案，我们很快就会变成一个臃肿的、很少使用的 mixin 庞然大物。我认为允许您解决自己的边缘情况的功能是一个更好、更灵活的 api。了解这些功能，您就可以让任何事情发生。依靠 mixin，您可以依靠我们为您解决每一个极端情况。
好的，点了。死简单不应该是唯一的目标。
@EricMeyer 下一个主要版本中的解决方案是否包括边框大小调整？使用它，我能够在不破坏布局的情况下添加边框，但它们没有居中。如果您认为这对未来的搜索者有帮助，我可以创建一个新问题。
是的，border-box-sizing 解决了一半的问题。在 Susy 2.0（目前接近 alpha 开发结束）中，您还可以通过各种方式应用装订线：之前、之后、拆分或内部（拆分填充）。这将上面的解决方案简化为： .left-column { @include span(2 inside);右边框：1px 实心； }。我希望满足上面的“简单”要求。 :)