# Responsive Webdesign Breakpoint Mixin

Bei David Hellmann habe ich in seinem (sehr interessanten und lesenswerten) Artikel "[[https://davidhellmann.com/blog/development/css-media-queries-das-problem-mit-fixen-breakpoints|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.  

<code sass>
// 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;
    }
  }
}
</code>

Verwendet werden kann das Mixin dann wie folgt:

<code css>
#page {
  width: 1200px;

  @include breakpoint(1024px) {
    width: 960px;
  }
  @include breakpoint(960px) {
    width: 600px;
  }
}
</code>

{{tag>sass scss mixin snippet}}