html - CSS:Compass Susy Grid 未正确对齐

Question

我正在尝试让 susy 在 compass 中正常工作。

请看下面的 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