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 /波旁/纯

#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

要结束Bourbon Neat中的“行”，您必须在该行的最后一行中包含omega();而不是在代码中的外部容器中。例如：

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

您还需要处理skip-link元素 - 如果它不是网格系统的一部分，它会混淆其他元素的布局。在下面的示例中，我使用display: none;隐藏了它。

这是一个更新的完整示例：http://sassmeister.com/gist/5ea39585a8a362ce71c8