#016: Media Queries in Sass verwenden

Wir führen das Konzept von @media-Queries in CSS ein.

Vieles, was die Verwendung von Sass in diesem Projekt ermöglicht, ist das DRY-Prinzip (Don't Repeat Yourself – Wiederhole dich nicht). Das haben wir bei der Festlegung von Farb- und Größenvariablen gemacht. Das haben wir mit unseren Schriftartenstapeln gemacht. Jetzt machen wir es wieder mit Media Queries. Jedes Mal, wenn wir eine Media Query benötigen, haben wir jetzt ein @mixin, das wir verwenden können. So können wir sie an einer einzigen Stelle ändern, wenn nötig.

Anstatt unseren Media Queries Namen wie „iPad“ oder etwas Übermäßig Spezifisches zu geben, verwenden wir einfach willkürliche, aber verständliche Namen wie „Baby Bear“ und „Papa Bear“.

Wir beginnen mit einem breiten Bildschirm und verkleinern ihn dann, bis die Navigation schlecht aussieht, und das ist unser erster Media-Query-Break. An diesem Punkt teilen wir die Navigation in zwei Reihen zu je vier Elementen statt einer Reihe zu acht. Wir müssen die Schatten anpassen, damit es richtig aussieht.

Wir passen auch die Breite des Seitenwraps bei bestimmten Media Queries an, was bedeutet, dass wir auch die Funktionsweise des Logos anpassen müssen.