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 つの「セクション X」項目が 1 行にあるはずですが (span-columns は 3 に設定され、3 + 3 は $total-columns? の数です)、次のようになります (積み上げのみ):

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

テスト境界を削除しても機能しません。ここで何が間違っていますか？

4

1 に答える 1

1

2つのこと：

  1. モデルを使用していない限りborder-box、これらの境界線を削除する必要があります。代わりにテスト用に使用してみてくださいoutline- フローには影響しません:

    .border
  outline: 1px solid black

  2. 実際に.section:last-childセレクターと一致するセクションはありません。それらはどれも親要素の最後の子ではないため、omegaミックスインが追加されることはありません。まず、-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 に答える