Добавление разделителя между горизонтальной сеткой sass susy

Я пытаюсь понять, как добавить вертикальные разделители между моим горизонтальным макетом. У меня есть 3 столбца, и мне нужны разделители справа и слева от среднего столбца.

Обычно я добавляю правило :after в CSS, чтобы отрисовывать его после каждого элемента, и правило :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
person Glitches    schedule 17.12.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Цель системы сетки, такой как Susy, состоит в том, чтобы заполнить все доступное пространство расположением элементов. Но есть пара вариантов добавления границ:

1) Добавьте box-sizing: border-box;, возможно, поместив @include border-box-sizing; в объявление li. См. дополнительные сведения об размере блока.

2) Используйте схему, которая не добавляет элементу ширина. Пример: outline: solid black 1px;

person KatieK    schedule 17.12.2014