Bourbon NEAT: колонка 4rth не будучи рядный

Question

Я не могу понять, что я не хватает в моей дерзости, но мой 4rth столбец в моей сетке не пойдет рядный, но только 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 столбцов, которая будет разбиваться каждые четыре столбца, правильно?

Answer 1

По the docs:

Вы должны использовать тот же формат для этого параметра, как для нормального п-го детского вызова. Таким образом, в данном случае, «4n», а не «4»:

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

В противном случае, с тем, как омега Mixin Аккуратные написана, она пытается выводить п-й ребенок (4 + 1), который не может скомпилировать ,

Отредактировано для добавления: вам также нужно отказаться от класса 'row' для родителя, так как это берется Neat. Рабочий пример: http://codepen.io/anon/pen/lewJj

Answer 2

Это должно сделать работу ..

$ грид-столбцы: 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); 
    } 
}