Combining Susy at-breakpoint() and device orientation media queries

Question

I'm relatively new to Susy and responsive design. I've managed to setup my grid and using at-breakpoint(), I've made the page fully responsive as required first by testing it while resizing the browser window, and then testing it on the actual mobile devices (phones and tablets). I encounter a problem with the iPad as requires an extra orientation rule (orientation: landscape) in the media query. What's the workaround here, is there a way to include it in the at-breakpoint rule or I'll have to make up a separate media query just for this case?

Here's my grid setup:

$total-columns: 4;
$column-width: 60px;
$gutter-width: 20px;
$grid-padding: $gutter-width/2;

// alternative layout breakpoints

$tablet-small: 6;
$tablet: 8;
$computer: 12;

And when dealing with the sidebar and the page body, first I display them as block elements to fill the entire page horizontally, and after the breakpoint I make them behalf as columns like so:

#sidebar {
    @include at-breakpoint($computer) {
        @include span-columns(3, $computer);
    }
} // sidebar

#page-body {
    @include at-breakpoint($computer) {
        @include span-columns(9 omega, $computer);
    }
} // page-body

How should I alter the code so that it keeps the variables for the breakpoints and just add the orientation rule? Thanks!

Answer 1

If you want to target specific device, I think it's better to specify the width.

So instead of $computer: 12; maybe do $computer: 48em 12;

Once the min-width: 48em; is reached, it will change the layout to become a 12 column grid.