在水平sass susy网格之间添加分隔线

Question

我正在试图弄清楚如何在水平布局之间添加垂直分隔线。我有3列，我想在中间栏的右侧和左侧分隔。

通常我会在CSS中添加:after规则以在每个元素之后绘制它，并:last-child将其从末尾排除，但问题是Susy的span()函数填满了可以在元素之间添加1像素分隔符的空间。

以下是我的代码：

萨斯：

nav {
    ul {
        list-style-type: none;
        li {
            width: span(1 of 3);
            float: left;
        }
    }
}

HTML：

<nav>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</nav>

Answer 1

像Susy这样的网格系统的目标是通过排列元素来填充所有可用空间。但是添加边框有几种选择：

1）添加box-sizing: border-box;，可能会将@include border-box-sizing;放入li声明中。有关box-sizing的更多信息，请参阅。

2）使用outline，它不会添加到元素的宽度。示例：outline: solid black 1px;