SASS (SCSS, Bourbon, Neat) Сетка не работает

Question

Я пытаюсь использовать базовую тему underscore для wordpress с помощью SASS, Bourbon и NEAT для создания хорошей гибкой сетки.

HTML:

<div id="page" class="hfeed site"> 
    <a class="skip-link screen-reader-text" href="#content">Skip to content</a> 

    <header id="masthead" class="site-header" role="banner"> 
    </header><!-- #masthead --> 

    <div id="content" class="site-content"> 
    </div><!-- #content --> 

    <footer id="colophon" class="site-footer" role="contentinfo"> 
    </footer><!-- #colophon --> 
</div> 

SASS/Bourbon/Аккуратные

#page { 
    @include outer-container; 

    #masthead { @include span-columns(3); } 
    #content { @include span-columns(9); } 
    @include omega(); 
    #colophon { @include span-columns(12); } 
} 

Создано CSS:

#page { 
    max-width: 68em; 
    margin-left: auto; 
    margin-right: auto; 
    margin-right: 0; 
} 
#page::after { 
    clear: both; 
    content: ""; 
    display: table; 
} 
#page #masthead { 
    float: left; 
    display: block; 
    margin-right: 2.35765%; 
    width: 23.23176%; 
} 
#page #masthead:last-child { 
    margin-right: 0; 
} 
#page #content { 
    float: left; 
    display: block; 
    margin-right: 2.35765%; 
    width: 74.41059%; 
} 
#page #content:last-child { 
    margin-right: 0; 
} 
#page #colophon { 
    float: left; 
    display: block; 
    margin-right: 2.35765%; 
    width: 100%; 
} 
#page #colophon:last-child { 
    margin-right: 0; 
} 

В настоящее время все пункты (страницы, титульные, содержание) занимают 100% ширину и стек друг на друга.

Я хотел бы думать, что я использовал это правильный путь, но я уверен, что пошло не так, как даже на примере аккуратной страницы, вне все не отображается правильно.

Любые идеи?

---

Это работает, когда вы удаляете ссылку пропуска в режиме sassify, но она не работает в моей локальной настройке. Спасибо, Кати, я продолжу и исследую.

#page { 
    @include outer-container; 
    #masthead { @include span-columns(2); } 
    #content { @include span-columns(9); } 
    @include omega(); 
    #colophon { @include span-columns(12); } 
} 

Answer 1

Чтобы закончить «ряд» в Бурбон Аккуратные, вы должны включить omega() в последнюю очередь в этой строке; а не во внешнем контейнере, как в вашем коде. Пример:

#content { @include span-columns(9); @include omega(); } 

Вам также нужно обработать Ваш skip-link элемент - если он не является частью системы сетки, она путает расположение других элементов. В приведенном ниже примере я скрыл его с display: none;.

Вот обновленный полный пример: http://sassmeister.com/gist/5ea39585a8a362ce71c8