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

【问题标题】：Adding divider between horizontal sass susy grid在水平 sass susy 网格之间添加分隔线
【发布时间】：2014-12-17 18:37:55
【问题描述】：

我正在尝试弄清楚如何在我的水平布局之间添加垂直分隔线。我有 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>

【问题讨论】：

标签： css sass susy

【解决方案1】：

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

1) 添加box-sizing: border-box;，可能通过将@include border-box-sizing; 放入您的li 声明中。在box-sizing 上查看更多信息。

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

【讨论】：