SASS Mixins für CSS3 Media Queries vol. 2

Für all diejenigen, welche sich noch zuerst Teil 1 ansehen wollen einfach hier klicken Smiley

Wie in dem vorhergehendem Post nachzulesen sind wir ein wenig auf SASS, CSS3 & Responsive Design eingegangen. Nachdem ich einige Beispiele mit den Mixins erzeugt hatte, ist mir schnell aufgefallen, dass da noch etwas fehlt. Und zwar der WAHRE MobileFirst Ansatz.

Folgendes Prinzip:

Sämtliche Properties & Werte welche auf kleineren Auflösungen festgelegt wurden sollten, sich eig. auch auf größere Auflösungen beziehen (einfaches bsp. | nur Breite soll sich verändern aber die Höhe nicht bei größeren Auflösungen), in dem Beispiel aus dem ersten Post wird man schnell feststellen, dass man eine Art Basisklasse implementieren muss um die Eigenschaften auf größere Auflösungen zu vererben. Die Lösung des Problems ist ganze einfach.
Wir müssen einfach die bestehenden Mixins kopieren und erneut einfügen und bei jedem Media Query den 2ten Filter entfernen. Sollte am Ende also ungefähr so aussehen.

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


Wer sich wundert für was das –gt bei den Mixinnamen steht, hierbei habe ich an etwas wie greater than gedacht (> )

Und schon mit ein paar wenigen Änderungen haben wir 5 weitere super awesome sass mixins erstellt! Smiley

Viel spaß damit.

Kommentare sind geschlossen