CSS: Compass Susy Grid is not aligning properly

Question

im trying to get susy correctly working within compass.

Look at the following html sample (body part):

<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>

... and the according sass code:

@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" items should be on one line here (span-columns is set to 3, and 3 + 3 is the number of $total-columns?), but it looks like this (only stacked):

https://i.stack.imgur.com/vb7og.png

Removing the test-borders also doesnt work. What im doing wrong here?

Answer 1

Two things:

1. Unless you are using the border-box model, you do need to remove those borders. Try using outline for testing instead - as it doesn't affect the flow:

   .border
     outline: 1px solid black
   

2. None of your sections actually match the .section:last-child selector. None of them are the last child of their parent element, and so none are getting the omega mixin added to them. First, you either need to wrap them so -child selectors work, or use -of-type. Then you need to use nth- instead of last-, because you don't just want to match the final one, you want to match all the even ones:

   // 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