SASS Mixins für CSS3 Media Queries

Im heutigen WebDesign Zeitalter ist es so gut wie unvorstellbar geworden ohne CSS PreCompiler oder gar CSS3 zu leben. CSS3 bietet einen enormen Funktions als auch Design Umfang wie z. B. Animationen, Transitions (übergangs Animationen), 3D Darstellun uvvvvm. Die CSS PreCompiler hingegen erweitern nicht die Möglichkeiten von CSS oder fügen gar neue Design möglichkeiten hinzu, sondern sie erweitern die CSS-Syntax. Dies ermöglicht uns nun mit Variablen, Funktionen, Ableitungen und derartigen Möglichkeiten unsere geschriebenen CSS Regeln oder Files wieder zu verwenden um uns somit unzählige graue Haare zu ersparen. Zu alle dem kommt noch die SmartPhone Ära hinzu (AlwaysOn), diese verlangt von uns WebEntwicklern –/ Designern die Layouts welche wir erstellen nun auch noch Responsive (empfänglich für diverse Browserauflösungen) zu erstellen.

Zu diesem Thema habe ich mir ein wenig Gedanken gemacht und das kam dabei heraus:

Die Mixins

   1: @mixin xs-media ($target: all){
   2:   @media #{$target} and (max-width: 360px) {
   3:     @content;
   4:   }
   5: }
   6:  
   7: @mixin sm-media ($target: all){
   8:   @media #{$target} and (min-width: 361px) and (max-width: 767px) {
   9:     @content;
  10:   }
  11: }
  12:  
  13: @mixin md-media ($target: all){
  14:   @media #{$target} and (min-width: 768px) and (max-width: 991px) {
  15:     @content;
  16:   }
  17: }
  18:  
  19: @mixin lg-media ($target: all){
  20:   @media #{$target} and (min-width: 992px) and (max-width: 1199px) {
  21:     @content;
  22:   }
  23: }
  24:  
  25: @mixin xlg-media($target: all) {
  26:   @media #{$target} and (min-width: 1200px) {
  27:     @content;
  28:   }
  29: }

Diese Mixins sind weder großartig komplex, noch schwer nach zu vollziehen…. sie sind einfach nur NÜTZLICH. Ähnlich wie CodeSnipptes in VisualStudio. Diese 5 @Media Mixins erleichtern den Umgang mit MediaQueries für Responsive Layouts. Das erste Mixin (max-width; 360px) {} wird man jedoch nicht all zu häufig verwenden müssen, da es strengstens empfohlen ist diese sog. Responsive Layouts mit der ‘Mobile First’ Variante zu erstellen. D. h. man fängt mit dem Design für kleinere Geräte an und skalliert dann nach oben. Dies hat wieder mehrere Vorteile:

1. Man fokusiert sich auf das wichtigste, den CONTENT! Da man nicht viel Platz für sonstigen Schnick-Schnack hat.

2. Es ist ohne probleme möglich nach oben hin weiter bzw. bis zur unendlichkeit zu skalieren. Stichwort SmartTV’s mit einer 4K Auflösung z. B. Wobei solche Auflösungen z. Z. noch von den wenigsten unterstützt bzw. angepasst werden.

Anwendung

Wie man nun diese oben gezeigten SASS-Mixins verwendet sieht folgendermaßen aus:

   1: div {
   2:   /*Diese attribute treffen auf xs-screens zu*/
   3:   .
   4:   .
   5:   .
   6:   
   7:   @include sm-screen {...};
   8:   
   9:   @include md-screen {...};
  10:  
  11:   @include lg-screen {...};
  12:  
  13:   @include xlg-screen {...};
  14: }

Ich hoffe diese kleinen Helferlein werden euch bei der Erstellung von vielen Responsive Websites helfen und Spaß machen Smiley

Unter http://codepen.io/MT-WebDev/pen/XJgjqN gibt es noch ein Beispiel wie das ganze dann in der Realität aussehen könnte.

Falls nun euer/dein Interesse geweckt ist, schau doch mal auf http://ppedv.de/web vorbei. Dort lösst sich bestimmt der richtige Kurs finden!

Kommentare sind geschlossen