SASS (SCSS，Bourbon，Neat)网格不工作

Question

我正在尝试使用下划线的基本主题为wordpress与SASS，波旁和整洁，以创建一个良好的灵活的网格。

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>

沙司/波旁酒/纯酒

#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中的skip链接，但它在我的本地设置中不起作用时，这是可行的。谢谢凯蒂，我会继续调查。

#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