Search code examples
csssasscompass-sasssusy-compass

Combining layout breakpoints in Compass Susy?

I am just atarting to use Susy

I have defined my layouts, I needed to start with the desktop version and add 2 more: one for tablets and one for phones:

$total-columns  : 12;
$column-width   : 4em;
$gutter-width   : 1.4em;
$grid-padding   : $gutter-width;

$phone: 4 35em;
$tablet: 35em 8 70em;

Seems to be working. My issues arise when there's a change I need to make to something that should appear in the desktop but not in EITHER of the other 2, I find myself repeating myself:

#my-div {
@include span-columns(3 omega,7);
     @include at-breakpoint($tablet) {
    display:none;
    }
 @include at-breakpoint($phone) {
    display:none;
    }
}

How can I simplify this?

Solution

  • In that instance, you don't need susy, you just need a basic CSS media-query with max-width 70em. the only reason for at-breakpoint is to get a media-query/layout change combination. Alternatly, add '$small: 8 70em;' and use that.