0

我不明白我在我的 sass 中缺少什么，但我的网格中的第 4 列不会内联，但只有 3 个列可以：

我想要一个简单的 4 列网格，所以我做了：

我的标记

<section id="spots" class="row">
    <li class="item">My item</li>
    <li class="item">My item</li>
    <li class="item">My item</li>
    <li class="item">My item</li>
</section>

我的萨斯：

.item {
    @include span-columns(3);
    @include omega(4);

这应该创建一个 4 列网格，每 4 列换行一次，对吧？

4

2 回答 2

1

根据文档：

您需要对该参数使用与普通 nth-child 调用相同的格式。所以，在这种情况下，'4n'，而不是 '4'：

.item {
    @include span-columns(3);
    @include omega(4n);
}

否则，按照 Neat 的 omega mixin 的编写方式，它会尝试输出 nth-child(4+1)，编译失败。

编辑添加：您还需要取消父级的“行”类，因为这是 Neat 所采用的。工作示例：http ://codepen.io/anon/pen/lewJj

于 2014-10-20T05:23:34.967 回答
0

这应该做的工作..

$网格列：12；必须设置为 12 而不是 10..

HTML 代码..

<div class="fifth">

    <div class="box">
        <p> Box 1 </p>
    </div>
    <div class="box">
        <p> Box 2 </p>
    </div>
    <div class="box">
        <p> Box 3 </p>
    </div>
    <div class="box">
        <p> Box 4 </p>
    </div>
    <div class="box">
        <p> Box 5 </p>
    </div>
    <div class="box">
        <p> Box 6 </p>
    </div>
    <div class="box">
        <p> Box 7 </p>
    </div>
    <div class="box">
        <p> Box 8 </p>
    </div>
    <div class="box">
        <p> Box 9 </p>
    </div>
    <div class="box">
        <p> Box 10 </p>
    </div>
    <div class="box">
        <p> Box 11 </p>
    </div>
      <div class="box">
        <p> Box 12 </p>
    </div>  
</div>

SCSS代码

.fifth {
    @include outer-container;
    div.box {
        font-size: 0.78em;
        height: 8em;
        background-color: #faa;
        margin-top: 2em;
        @include span-columns(3);
        @include omega(4n);
    }
}
于 2014-10-26T19:38:14.330 回答