Vorprozessoren wie Sass helfen uns dabei, unsere Entwicklungsmuskeln in fast allen Bereichen unseres CSS zu trainieren. Variablen, Mixins, Vererbung und viele weitere großartige Funktionen machen das Kodieren einfacher und übersichtlicher als je zuvor.
Wie sieht es also mit Sass aus, um responsives Design oder insbesondere Medienabfragen zu nutzen? Gibt es Funktionen von Sass, die sich besonders gut mit Medienabfragen verbinden? Gibt es etwas, das du vermeiden solltest? Begleite mich, wenn ich experimentiere und finde die Antworten.
Wie funktionieren grundlegende Sass-Funktionen mit Medienabfragen?
Ich habe in letzter Zeit viel mit Sass und Medienabfragen experimentiert, um zu sehen, was funktioniert und was nicht. Die Ergebnisse sind ziemlich gemischt: Einige Dinge funktionieren und andere nicht. Insgesamt gibt es wirklich nichts, was beeindruckend genug ist, um die Art und Weise, wie Sie Medienabfragen verwenden, vollständig zu ändern. Es lohnt sich jedoch, einige Beispiele zu zeigen, die veranschaulichen, wie die beiden zusammenarbeiten.
Variablen innerhalb einer Medienabfrage: Ja
In unserem ersten Test wird geprüft, ob eine in Sass festgelegte Variable in den Hauptteil einer Medienabfrage übernommen wird. Die Frage ist eine der folgenden: Kann ich eine Variable außerhalb einer Medienabfrage setzen und sie dann in einer Medienabfrage verwenden?
Es stellt sich heraus, dass dies gut funktioniert. Unsere generische Schriftgrößenvariable setzt die Schriftgröße innerhalb der Medienabfrage effektiv auf 10px.
Variablen als Haltepunkte: Nein
Meine nächste Frage war, ob ich Variablen setzen könnte, um meine Haltepunkte festzulegen. Ich bin nicht sicher, ob dies eine gute Idee wäre, aber grundlegender als diese Frage war, ob es überhaupt möglich ist oder nicht. Was passiert, wenn ich dies versuche?
Dies ist anscheinend keine gültige Verwendung von Sass-Variablen, da dieser Code einen Fehler ausgibt und nicht kompiliert wird. Ich habe dasselbe in LESS ausprobiert und gleichermaßen unbrauchbare Ergebnisse erhalten. Diesmal wurde es kompiliert, ohne dass ein Fehler ausgegeben wurde, der Wert wurde jedoch nicht ordnungsgemäß übertragen.
Erweitern einer Medienabfrage: Art von?
Das Erweitern funktioniert mit Medienabfragen, aber es ist wichtig zu wissen Wie Es funktioniert, weil die Ergebnisse möglicherweise nicht das sind, was Sie denken.
In unserem ersten Beispiel wird @extend so verwendet, wie es verwendet werden soll. Hier habe ich der errorTwo-Klasse gesagt, die Stile der errorOne-Klasse zu erben und die Farbe auf blau zu setzen.
Vorhersagbar produziert dies genau das Ergebnis, das wir wollen. Das @extend kümmert sich nicht darum, dass es sich in einer Medienabfrage befindet, es funktioniert genauso wie anderswo.
Was passiert also, wenn wir uns ein wenig mit dieser Struktur beschäftigen und einen Teil unseres Codes außerhalb der Medienabfrage platzieren? Hier habe ich die Stile für errorOne und errorTwo außerhalb der Medienabfrage festgelegt und dann versucht, einige fragwürdige Vererbungspraktiken anzuwenden, indem die errorTwo-Stile innerhalb der Medienabfrage über einen Bereich von errorOne zurückgesetzt wurden.
Hier ist das kompilierte CSS aus diesem Code. Die Hoffnung bestand darin, dass die errorOne-Stile außerhalb der Medienabfrage auf errorTwo innerhalb der Medienabfrage angewendet wurden. Stattdessen funktionierte @extend so, wie es entworfen wurde: Es kombinierte die Selektoren am ursprünglichen Speicherort und wendete die freigegebenen Stile an.
Es ist wichtig zu wissen, dass der obige Code sich sehr von dem beabsichtigten CSS unterscheidet, das unten gezeigt wird. Hier werden errorOne und errorTwo individuell mit unterschiedlichen Stilen definiert. Wenn die Medienabfrage wirksam wird, wird errorTwo mit dem Hinzufügen einer Farbänderung auf errorOne eingestellt.
Mixins in einer Medienabfrage: Ja
Genau wie bei Variablen können wir ein Mixin außerhalb einer Medienabfrage deklarieren und innerhalb einer Medienabfrage anwenden. Zum Beispiel habe ich hier ein Schriftartenmixin mit einigen Textstilen eingerichtet und dann innerhalb einer Medienabfrage aufgerufen.
Rollen Sie eine Medienanfrage in ein Mixin: Nein
Von hier aus fragen Sie sich vielleicht, ob Sie tatsächlich eine ganze Medienabfrage in ein Mixin einrollen und dann einige Argumente übergeben können, wenn Sie sie implementieren möchten. Soweit ich das beurteilen kann, gibt es keine Möglichkeit, dies in Sass, LESS oder Stylus zu tun.
Verschachteln von Medienabfragen
Bisher haben wir keine großen Überraschungen erlebt. Meistens funktioniert alles wie erwartet, mit der möglichen Ausnahme, dass Haltepunkte keine Variablen akzeptieren. Unser nächstes Thema ist das in Sass integrierte Feature, das speziell für Medienabfragen erstellt wurde: Verschachtelung.
Mit Sass können Sie alle Arten von Code verschachteln. Bei der Programmierung mit Sass ist dies sicherlich keine Voraussetzung, aber die Funktion ist vorhanden, wenn Sie es möchten. Nehmen wir zum Beispiel an, wir wollten eine genauere Methode, um das folgende CSS zu schreiben:
Mit Sass können wir uns die Erstellung eines separaten Deklarationsblocks ersparen und die Hover-Stile innerhalb der Button-Klasse verschachteln.
Dieselbe Logik kann verwendet werden, um Medienabfragen auf bestimmte Elemente anzuwenden. Anstatt einen dedizierten Abschnitt zu erstellen, der alle Ihre Medienabfragen enthält, können Sie sie alle verschachteln und sie mit den von ihnen modifizierten Stilen koppeln. Hier ist ein Beispiel:
Vor- und Nachteile von Medienverschachtelungen
Die Idee hinter der Verschachtelung von Medienabfragen ist zumindest an der Oberfläche eine anständige. Wie bereits erwähnt, werden die Medienabfragen mit den Originalstilen, die sie modifizieren, eingehalten. Dies ist ein anständiges Organisationsschema. Es reduziert auch die notwendige Wiederholung der Selektoren, was eine gute Sache ist.
Leider werden diese Vorteile meiner Meinung nach durch die Tatsache aufgewogen, dass dies zu unordentlichem Code führt. Dieses Problem zeigt sich eindeutig, wenn Ihr Code komplexer wird. Hier haben wir zwei verschiedene Elemente, von denen jedes die verschachtelte Medienabfragefunktion nutzt.
Der oben genannte Sass wird in das unten stehende CSS übersetzt. Wie Sie sehen, wird jede Medienabfrage einzeln geschrieben und erscheint direkt nach den damit verknüpften Stilen.
Wenn Sie mit Responsive Design gearbeitet haben, haben Sie wahrscheinlich sofort Probleme mit der Art und Weise, wie dieser Code kompiliert wird. Um zu sehen, was ich meine, schauen wir uns an, wie ich das in reinem CSS manuell auscodieren würde, wenn ich es manuell machen würde.
Nennen Sie mich verrückt, aber ich denke, das ist besser als das, was Sass ausspuckt. Ich habe ein echtes Problem mit der Tatsache, dass identische Medienabfragedeklarationen nicht kombiniert werden. Wir sehen hier, dass es keinen Grund gab, die 300px-Abfrage zweimal zu schreiben, wenn wir sie einfach einmal ausschreiben und beide Deklarationsblöcke hinein werfen könnten.
Außerdem ist die Organisation hier sauberer und leichter zu verfolgen. Wenn Sie mit Medienabfragen arbeiten, müssen Sie in der Regel viele Optimierungen vornehmen. Mit der Sass-Methode müssen Sie durch Ihren Code jagen und finden jedes Stück, das geändert werden muss. Wenn Ihre SCSS-Datei Hunderte von Codezeilen enthält, kann dies brutal sein. Mit Vanilla CSS können wir alle unsere Medienanfragen an einem Ort ablegen und als Einheit zusammenstellen.
Kontrollrichtlinien
Ich bin zwar nicht besonders begeistert von den Ergebnissen, die ich durch das Mischen von Sass mit Medienanfragen erhalten habe, aber ein Bereich, der meiner Meinung nach einige Erkundungen wert ist, sind Kontrollanweisungen. Dies ist ein heikles Thema, denn wenn Sie kein Programmierer sind, erscheinen Steueranweisungen für CSS viel zu komplex. Denken Sie daran, bevor Sie mir einen unangenehmen Kommentar hinterlassen, dass ich hier nur mit einigen Möglichkeiten spiele.
In Anbetracht der Natur von Medienanfragen könnten Kontrollanweisungen einige interessante Funktionen enthalten. Schließlich ist eine Medienabfrage selbst einer if -Anweisung sehr ähnlich: Wenn der Viewport = x ist, tun Sie y. Mit einem ausgefallenen Sass können wir noch viel weiter gehen. Sehen Sie, ob Sie herausfinden können, was hier los ist.
Grundsätzlich habe ich einen Artikel mit einer Breite eingerichtet, die seine Breite bei jeder Medienabfrage um 100 Pixel reduziert. Dann stelle ich ein Mixin ein, das die Farbe des Elements ändert, wenn seine Breite einen bestimmten Punkt unterschreitet.
Diese Technik kann für viele verschiedene Dinge nützlich sein, z. B. für das Ändern einer Skriptschriftart in etwas Standard, wenn die Größe zu klein wird. Hier ist eine leicht modifizierte Version, die überwacht, bis das Objekt weniger als 400px breit ist und dann die Höhe auf die halbe Breite setzt.
So kompiliert das. Wie Sie sehen, wurde die Höhe bei der ersten Medienabfrage nicht geändert, da die Breite nicht unter 400px liegt. Bei der zweiten Medienabfrage beträgt die Breite zwar 300px, die Höhe wurde also auf 150px geändert. Das Schöne daran ist, dass der kompilierte Code prägnant ist und keinerlei verrückte Logik von oben hat.
Fazit
Ich hätte wirklich gerne eine Diskussion darüber präsentiert, wie Sass bei Medienabfragen ein entscheidender Wandel ist, aber zu diesem Zeitpunkt glaube ich, dass das Gegenteil der Fall ist. Es ist wahrscheinlich am besten, sich von den grundlegenden Sass-Funktionen bei der Implementierung von Medienabfragen fernzuhalten. Sie können Variablen und Mixins wie gewohnt verwenden (akzeptieren Sie dies in der Haltepunktdeklaration), achten Sie jedoch darauf, dass die Vererbung anders funktioniert als erwartet, und denken Sie zweimal darüber nach, bevor Sie eine Medienabfrage verschachteln, da Sie auf lange Sicht wahrscheinlich mehr Arbeit für sich selbst schaffen .
Eine Ausnahme, die ich mir vorstellen kann, sind Kontrollanweisungen, die ziemlich weit fortgeschritten sind und faszinierende Möglichkeiten bieten, wenn sie mit Medienanfragen kombiniert werden.
Haben Sie versucht, Sass in Verbindung mit Medienanfragen zu implementieren? Hast du irgendwelche coolen Tricks entdeckt oder hast du dich entschieden, die Übung komplett zu vermeiden? Lass es uns in den Kommentaren wissen.