sass - Susy グリッドを使用した水平リスト

Question

Susy Grid に収まる Android のようなメイン ナビゲーションを構築したいと考えています。次のようになります。

コードは次のとおりです。

HTML:

<div class="container">
    <nav>
        <ul class="horizontal-list">
            <li>
                <a href="#">One</a>
            </li>
            <li>
                <a href="#">Two</a>
            </li>
            <li>
                <a href="#">Three</a>
            </li>
            <li>
                <a href="#">Four</a>
            </li>
        </ul>
    </nav>
</div>

サス:

header.main {
    height: $headerHeight;
    background: url('images/headerBackground.gif');

    .container {
        @include container;
        @include susy-grid-background;

        nav {
            @include span-columns(8);

            ul.horizontal-list {
                @include horizontal-list;
                overflow: visible;

                li {
                    @include isolate-grid(2, 8);

                    padding: 0;
                    display: table;
                    a {
                        // vertical alignment
                        display: table-cell;
                        height: $headerHeight / 2;
                        padding-bottom: 2px;
                        vertical-align: bottom;

                        // appearance
                        color: $greyLight;
                        font-size: 18px;
                        text: {
                            transform: uppercase;
                            decoration: none;
                        }

                        // hover
                        position: relative;
                        &:before {
                            content: '';
                            display: block;
                            width: $headerUnderlineGap;
                            background: $black;
                            height: $headerHeight;
                            position: absolute;
                            top: 0;
                            margin-left: -$headerUnderlineGap + 1;
                        }

                        &:hover {
                            color: $white;

                            &:after {
                                content: '';
                                display: block;
                                background: $cyanLight;
                                width: 114%; // TODO check why space(2, 8) does not work
                                height: 4px;
                                position: absolute;
                                margin: -1px 0 0 1px;
                            }
                        }
                    }
                }
            }
        }
    }
}

&:after要素の幅を に設定し、 に設定し114%ないのは少しハッキーだと思いspace(2, 8)ます。Susy グリッドと継続的な下線を使用して、次の li 要素までホバーする水平ナビゲーションを設定する方法を教えてください。

前もって感謝します！

Answer 1

space(2,8)8は実際にはコンテキストではないため、その場合は機能しません2。あなただけが必要space(2,2)です。