在水平Sass Suss網格之間添加分隔線

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;