Responsive Webdesign Breakpoint Mixin

Bei David Hellmann habe ich in seinem (sehr interessanten und lesenswerten) Artikel „CSS Media Queries: Das Problem mit fixen Breakpoints“ ein kleines Mixin gefunden. Mit diesem können die Breakpoints sehr einfach und elegant geschrieben werden, ohne das „media screen“ Gedöhns jedesmal wiederholen zu müssen.

// Media Query
$media-direction: max;
@mixin breakpoint($values, $direction: $media-direction) {
  @if length($values) > 1 {
    $min: nth($values,1);
    $max: nth($values,2);
 
    @if unitless($max) {
      $max: $max + 0px;
    }
 
    @if unitless($min) {
      $min: $min + 0px
    }
 
    @media screen and (min-width: $min) and (max-width: $max) {
      @content;
    }
  } @else {
    @if unitless($values) {
      $values: $values + 0px;
    }
 
    @media only screen and (#{$direction}-width: $values) {
      @content;
    }
  }
}

Verwendet werden kann das Mixin dann wie folgt:

#page {
  width: 1200px;
 
  @include breakpoint(1024px) {
    width: 960px;
  }
  @include breakpoint(960px) {
    width: 600px;
  }
}