compass-sass - 嵌套列计算错误？

Question

我正在拼命尝试用 Susy 模拟一个网站。我担心我可能只是错过了一些明显的东西，但是当我在 Susy 网格中嵌套项目时，每列百分比宽度和边距似乎略有超出，以至于它们加起来超过 100% 并换行到下一行。在以下示例中，#main_headernav 设置为跨越 12 列中的 8 列，其中的每个 li 应填充 8 列中的 2 列。每个 li 都有一个计算样式，如下所示，加起来超过 100% 并导致最后一项换行

width: 22.58065%;
float: left;
margin-right: 3.22581%;

这是有问题的例子:

<header id="main_header">
    <img id="main_banner" src="images/test_banner.png" alt="Test">
    <nav id="main_headernav">
        <ul>
            <li><a href="#about">About</a></li>
            <li><a href="#blog">Blog</a></li>
            <li><a href="#shop">Shop</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
    </nav>          
</header>

和 SASS:

$total-columns  : 12;           
$column-width   : 60px;           
$gutter-width   : 20px;  
$grid-padding   : $gutter-width;

//Set border-box sizing - also alters SUSY grid math
//@include border-box-sizing;

// Main Container
#main_container {
    @include container;
}

#main_header {
    @include span-columns(12 omega);

    #main_banner {
        @include span-columns(12 omega,12);
    }

    #main_headernav {
        @include span-columns(8 omega,12);

        li {
            @include span-columns(2,8);
        }
    }
}   

Answer 1

好吧，我知道这将是我的问题:)

当然，有必要在每第 4 个 li 子级上使用 nth-omega mixin，以避免多余的边距并防止包裹。

而且盯着同一个屏幕只花了两个小时:)