SASS（SCSS、Bourbon、Neat）网格不工作

Question

我正在尝试使用带有 SASS、Bourbon 和 NEAT 的 wordpress 的 underscore 基本主题来创建一个很好的灵活网格。

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/波旁威士忌/Neat

#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