带有 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>

SASS：

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)。