0

我试图让 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

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

4

1 回答 1

1

两件事情：

  1. 除非您使用该border-box模型，否则您确实需要删除这些边框。尝试使用outlinefor testing - 因为它不影响流程：

    .border
  outline: 1px solid black

  2. 您的任何部分实际上都不匹配.section:last-child选择器。它们都不是其父元素的最后一个子元素，因此没有一个将omegamixin 添加到它们中。首先，您要么需要包装它们以便-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
于 2013-08-30T17:38:21.780 回答