Anything that you want changed at the breakpoint has to go inside at-breakpoint
. The arguments passed to container
are actually a shortcut for at-breakpoint
, so you wouldn't use them inside it. You want something like this:
$total-columns: 4;
$container-width: 320px;
$tablet-width: 768px;
$tablet-columns: 10;
$desktop-width: 960px;
$desktop-columns: 12;
.content {
@include container;
@include at-breakpoint($tablet-width $tablet-columns) {
width: $tablet-width;
}
@include at-breakpoint($desktop-width $desktop-columns) {
width: $desktop-width;
}
}
article {
// mobile styles & tablet breakpoint could go here...
@include at-breakpoint($desktop-width $desktop-columns) {
@include span-columns(9); // $total-columns is assumed...
}
}
aside.sidebar {
// mobile styles & tablet breakpoint could go here...
@include at-breakpoint($desktop-width $desktop-columns) {
@include span-columns(3 omega);
}
}
Now, if you want to see your various grids, you'll also have to include susy-grid-background
at each breakpoint (along side your container width). The grid background is like any other Susy mixin - it doesn't know to change for different breakpoints unless you tell it to.