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 呼び出しの場合と同じ形式を使用する必要があります。したがって、この場合は「4」ではなく「4n」です。

.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; 10 ではなく 12 に設定する必要があります。

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 に答える