breakpoints, media queries und SASS

Die Verwendung von 'media queries' erweißt sich häufig als schreibintensive Aufgabe. Mithilfe von SASS kann der Aufwand entsprechend gering gehalten werden. Wenn man weiß wie.

Mit gefällt der Ansatz am besten, alle Breakpoints in einer Map zu definieren. Sauber, ordentlich und an einer einzigen Stelle. Mithilfe des Preprocessing stehen uns endlich auch Funktionen und Schleifen zur Verfügung. Ich möchte euch hier kurz einige Beispiele geben, die unseren Arbeitsalltag etwas vereinfachen. Das Grundkonzept basiert auf der Library von 'include-media'. Bereits definierte Breakpoints, Expressions und Media-Types überschreibe ich noch einmal.

Mithilfe eines 'debug mixins' werden alle definierten Breakpoints ausgegeben. Weiter unten sind auch konkrete Beispiele zur Verwendung verschiedener media queries.

See the Pen simple breakpoints and media queries (SASS/SCSS) by Andy (@blacklightdesign) on CodePen.