Susy Multiple Responsive Mixin Failing

This one is going to send me to an early grave, Thanks in advance for any help pulling me out.

Short story: multiple at-breakpoints on a list element is failing when breaking from a tablet grid to a desktop grid, but works great when breaking from a mobile grid to tablet.

Starting with a mobile-first approach btw.

Here's the mark-up:

<html>
    .
    .
    .
    <div id="container">
        <div id="content">
            <article class="page">
                <ul id="members-frontpage">
                    <li class="member">
                    .
                    .
                    .
                    </li>
                </ul>
            </article>
        </div>
    </div>
    .
    .
    .
<html>

The base Susy configuration:

@include border-box-sizing;

//Mobile First config
$total-columns  : 4;
$column-width   : 4em;
$gutter-width   : 1em;
$grid-padding   : $gutter-width;

$show-grid-backgrounds  : true;

$legacy-support-for-ie6 : false;
$legacy-support-for-ie7 : false;

//Breaks
$break-to-medium: 30em 12; //break from phone to tablet
$break-to-large: 65em 25; //break from tablet to desktop

The basic layout:

#container {
    min-height: 100%;
    height: 100%;
    @include container($total-columns, $break-to-medium, $break-to-large);
    @include at-breakpoint($break-to-medium) {
        @include set-container-width;
    }
    @include at-breakpoint($break-to-large) {
        @include set-container-width;
    }
}

And finally the currently failing code:

What works? The break from the mobile 4-column grid to the tablet 12-column grid using at-breakpoint. Sweet!

What's failing? When breaking from the tablet grid, which has an omega(2n) to get a two columns display of .member list items, the second list element is keeping it's omega(2n) despite having moved to the desktop where it is not needed, and thus breaks the desired 5-column display.

Ripped right from Firebug: #members-frontpage .member:nth-child(2n) for the #2 list-item. Don't want it to be there. Hope that makes sense.

.page {
    padding: 0 $grid-padding;
    @include at-breakpoint($break-to-medium) {
        @include susy-grid-background;
    }
    @include at-breakpoint($break-to-large) {
        @include susy-grid-background;
        padding: rhythm(1,16px) 0;
        @include squish(2,2);
    }
}

#members-frontpage { //ul
    @include clearfix;
    list-style: none;
    margin: 0;
    padding: rhythm(1,16px) 0 0 0;
    text-align: center;

    .member {  //li
        position: relative;
        min-height: 15em;
        margin: 0 0 rhythm(2,16px) 0;
        border-radius: .75em;
        border: .1em solid rgba($green, .4);
        background: rgba(255,255,255,.4);

        //Here We Go
        @include at-breakpoint($break-to-medium) {
            @include span-columns(6,12);
            @include nth-omega(2n);
    }
        @include at-breakpoint($break-to-large) {
            @include span-columns(5,25);
            @include nth-omega(5n);
        }

    } //end .member

    .member-title {
        @include rhythm(0,.25,.25,0,16px);
        border-top-left-radius: .75em;
        border-top-right-radius: .75em;
        border-bottom: .1em solid rgba($green, .4);
        background: lighten($yellow, 34%);
    }
    .member-logo {
        @include rhythm(0,1,1,0,16px);
        max-width: 96%;
        height: 100% !important;
    }
    .member-content {
        position: absolute;
        width: 100%;
        bottom: 0;
        @include rhythm(0,0,1,0,16px);
        font-weight: bold;
    }

} // end #member-frontpage

Hacky solution is to remove the .member element's break from phone to tablet out of the parent's .scss nest.

Solution

Yep, Susy can't assume anything about what you want carrying over between breakpoints, and what you don't. You have to be explicit, but Susy gives you two options for doing that. One is basically what you are doing already, but written in pretty Susy syntax:

@include at-breakpoint($break-to-large) {
  @include span-columns(5,25);
  @include remove-nth-omega(2n); // remove the old one
  @include nth-omega(5n);  // set the new one
}

The other option is to scope your medium media-query more tightly:

$break-medium-only: 30em 12 65em; // min and max width settings

If you use a breakpoint with both min and max settings, the content of that breakpoint wont carry over into your large styles.

Unrelated: You can also simplify your container setup. Right now you are duplicating yourself.

@include container($total-columns, $break-to-medium, $break-to-large);

is the same as

@include container;
@include at-breakpoint($break-to-medium) {
  @include set-container-width;
}
@include at-breakpoint($break-to-large) {
  @include set-container-width;
}

You only need one or the other. The only advantage of the longer approach is that you get a bit more control, if you need it for any reason. But at their simplest, the output is identical.