Override span-columns() at-breakpoint in SUSY

Question

The question has already been asked, but the solution doesn't help me any further.

How to override span-columns at different breakpoint in SUSY

screen.css.scss

// Settings

$total-columns  : 6;
$column-width   : 4em;
$gutter-width   : 1em;
$grid-padding   : $gutter-width;

$tablet         : 8;
$desktop         : 12;

// Layout

body {
    @include container($total-columns, $tablet, $desktop);
    .logo {
        @include span-columns(4);
    }
    nav {
        @include span-columns(2 omega);
    }
}

@include at-breakpoint($tablet) {
    .logo {
        @include span-columns(5, $tablet);
    }
    nav {
        @include span-columns(3 omega, $tablet);
    }
}

@include at-breakpoint($desktop) {
    .logo {
        @include span-columns(1, $desktop);
    }
    nav {
        @include span-columns(11 omega, $desktop);
    }
}

This is the result: http://jsfiddle.net/jmdcp/1/

When changing the browser width, the columns don't resize. They keep the default ratio (span-columns(4) and span-columns(2 omega), even at the tablet and desktop breakpoint. I really don't see what I'm doing wrong.

Answer 1

Looks like a cascade specificity issue. Your initial span settings are nested under the body selector. Your breakpoint overrides are not. If you nest it all under body, or un-nest the initial settings it works:

body {
  @include container($total-columns, $tablet, $desktop);
}

.logo {
  @include span-columns(4);
  @include at-breakpoint($tablet) {
    @include span-columns(5);
  }
  @include at-breakpoint($desktop) {
    @include span-columns(1);
  }
}

nav {
  @include span-columns(2 omega);
  @include at-breakpoint($tablet) {
    @include span-columns(3 omega);
  }
  @include at-breakpoint($desktop) {
    @include span-columns(11 omega);
  }
}