CSS：指南针 Susy 网格未正确对齐

Question

我试图让 susy 在指南针中正常工作。

看下面的 html 示例（正文部分）：

<div class='page'>
  <header class='header border'>
    <nav class='nav border'>
      <ul>
        <li>Nav1</li>
        <li>Nav2</li>
        <li>Nav3</li>
        <li>Nav4</li>
        <li>Nav5</li>
      </ul>
    </nav>
    <section class='test border'>TEST</section>
  </header>
  <section class='section border'>Section 1</section>
  <section class='section border'>Section 2</section>
  <section class='section border'>Section 3</section>
  <section class='section border'>Section 4</section>
  <section class='section border'>Section 5</section>
  <section class='section border'>Section 6</section>
  <section class='section border'>Section 7</section>
  <section class='section border'>Section 8</section>
  <section class='section border'>Section 9</section>
  <section class='section border'>Section 10</section>
  <footer class='footer border'>Footer</footer>
</div>

... 以及相应的 sass 代码：

@import "compass"
@import "susy"

$total-columns : 6
$column-width  : 4em
$gutter-width  : 1em
$grid-padding  : $gutter-width

.page
    +container($total-columns)
    +susy-grid-background

.header
    +span-columns($total-columns)

.nav
    +span-columns($total-columns)

.test
    +span-columns($total-columns)

.footer
    +span-columns($total-columns)

.section
    +span-columns(3)
    &:last-child
        +span-columns(3 omega)

.border
    border: 1px solid black

这里应该有2个“Section X”项在一行（span-columns设置为3，3 + 3是$total-columns的个数？），但看起来像这样（仅堆叠）：

http://i.imgur.com/3LdJVX3.png

删除测试边框也不起作用。我在这里做错了什么？

Answer 1

两件事：

1. 除非您使用border-box 模型，否则您确实需要移除这些边框。尝试改用outline 进行测试 - 因为它不会影响流程：

   .border
     outline: 1px solid black
   

2. 您的任何部分实际上都不匹配.section:last-child 选择器。它们都不是其父元素的最后一个子元素，因此没有一个将omega mixin 添加到它们中。首先，您要么需要包装它们以便-child 选择器工作，要么使用-of-type。然后你需要使用nth-而不是last-，因为你不只是想匹配最后一个，你想匹配所有偶数个：

   // without changing your markup
   .section
     +span-columns(3)
     &:nth-of-type(even)
       +omega
   
   // with a new wrapper around your sections
   .section
     +span-columns(3)
     &:nth-child(even)
       +omega