Question

我试图让罗茜正确地在指南针内工作。

查看以下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“X部分”项目应该在这一行上（span-columns设置为3,3 + 3是$ total-columns的数量？），但它看起来像这样（只有堆叠）：< / p>

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

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

Answer 1

两件事：

除非您使用的是border-box模型，否则您需要删除这些边框。请尝试使用outline进行测试 - 因为它不会影响流程：
```
.border
  outline: 1px solid black
```
您的所有部分都没有与.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
```

CSS：指南针Susy Grid未正确对齐

1 个答案: