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; } }
🔗 Links zu dieser Seite