sass: use media query helpers

In case you do not already know about this.

I tried this months ago without luck, but some weeks ago I found out that you finally can use cool sass mixins to mix-in your breakpoint changes.

First of all look at this gist from anthony:
https://gist.github.com/anthonyshort/2028061

$mq-mobile-portrait     : 320px !default;
$mq-mobile-landscape    : 480px !default;
//...

// Both portrait and landscape
@mixin mobile-only {
    @media (max-width : $mq-mobile-landscape) {
        @content;
    }
}

There you will find plenty of mixings title like "mobile-only", "tablet-landscape-and-up", "desktop-only".. you will never use all. It is related to your styling style.

No you can simply wrap your statements like so:

@include tablet-landscape-and-up {
  li {
      display: none;
  }
}

Or even nested like this:

.element {
  display: none;
  @include tablet-landscape-and-up{
    display: inline-block;
  }
}