CSS-Frameworks sind dafür bekannt, einen Verein mit der Idee von semantischem HTML zu verbinden. Dies ist ein solches Problem, dass Entwickler überall auf der Idee gitterbasierter Frameworks gänzlich von dem Prinzip abgeraten sind, dass dies zu nicht-semantischen Klassennamen führt.
Mit Sass ist es sehr einfach, dieses Problem zu umgehen und ein vordefiniertes Raster zu verwenden, ohne auf ungewöhnliche Klassennamen zurückgreifen zu müssen. Tatsächlich hat die neueste Version von Sass (3.2) eine neue Funktion, die diese Aufgabe einfacher als je zuvor macht. Lesen Sie weiter, um zu erfahren, was es ist und wie es funktioniert.
Das Problem
Ich persönlich liebe es, Raster in CSS einzurichten und zu verwenden. Ich bin ein nerdiger, analytischer Typ, also Layout und alles, wenn seine Feinheiten (Ärger) buchstäblich meine Lieblingsbeschäftigung an CSS sind.
Zugegeben, ich sehe voll und ganz, wenn Sie die Startaufträge abgeschworen haben. Hier ist ein Beispiel für das Problem, das durch das Twitter-Bootstrap-Grid veranschaulicht wird:
Idealerweise sind Ihre Klassennamen auf etwas beschränkt, das etwas über den Seitenfluss sagt. Vielleicht haben Sie ein? Abschnitt oder vielleicht ein? Copyright? Klasse. Diese Klassennamen sagen Ihnen, wozu sie dienen, sind aber nicht so genau, dass sie die Art und Weise beschreiben, wie das Element gestaltet wird. Mit dieser Methode kann sich die Ästhetik des Designs bei einer Neugestaltung vollständig ändern, die Klassennamen können jedoch gleich bleiben.
Mit Bootstrap und anderen Rastern sind Sie jedoch gezwungen, alle diese Rasterklassennamen einzufügen, die tatsächlich kommunizieren und Ihr Layout sehr spezifisch rechts in Ihren HTML-Code definieren. Semantisch oder nicht, ich denke, dass Grids super Spaß machen und ziemlich einfach zu erlernen sind, aber letztendlich verwenden wir Klassen auf eine andere Art und Weise als das, was eigentlich beabsichtigt ist.
? Semantisch oder nicht, ich denke, dass Grids super Spaß machen und ziemlich einfach zu erlernen sind, aber letztendlich verwenden wir Klassen anders als das, was eigentlich beabsichtigt ist. ?Wäre es nicht schön, wenn wir das Beste aus beiden Welten haben könnten? Grid-Frameworks sind extrem einfach zu implementieren, aber semantische Codierung ist wohl der bessere Weg für die gesamte Branche. Es ist ein klassischer Kampf zwischen individuellen Bedürfnissen und dem Guten.
Sass @extend
Wenn wir Sass ins Bild bringen, können wir wirklich unseren Kuchen haben und auch essen. Der Grund dafür ist der ganze Punkt von Sass. Hinter den Kulissen kann man die Regeln brechen und alle möglichen verrückten Sachen machen, denn letztendlich wird Vanilla-CSS ausgegeben.
Die Sass-Funktion, die den Tag hier wirklich rettet, heißt @extend, und es ist die beste Sass-Funktion (es ist auch einer der Hauptgründe, warum viele weniger Benutzer nachgeben und zu Sass wechseln). Sass @extend ist eine einfache Funktion mit großen Auswirkungen.
Um zu verstehen, wie @extend funktioniert, wollen wir gleich zu einem Beispiel springen, das ich für ein vorheriges Tutorial geschrieben habe:
Hier haben wir zwei Klassen, die die meisten ihrer Stile miteinander teilen müssen. Grundsätzlich die? Antwort? Klasse ist genau wie der? Kommentar? Klasse, nur mit kursivem Text und einer anderen Hintergrundfarbe. Um dies zu erreichen, verwenden wir einfach eine @extend-Anweisung in unserer Antwort. Klasse, die auf unseren Kommentar hinweist? Klasse.
Dies sagt Sass, dass bei der Ausgabe des CSS alle Stile von? Comment? sollte auch auf "antworten" angewendet werden. Das Beste daran ist, dass Sass intelligent genug ist, um dies auf eine Weise auszugeben, die Redundanz eliminiert:
Ich weiß, was du denkst, warum zum Teufel haben wir nicht überhaupt so codiert? Das konnten wir absolut. Für viele ist der Sass-Weg jedoch etwas linearer und einfacher zu installieren.
Rasterklassen erweitern
Nun, da wir wissen, was @extend tut, wollen wir sehen, wie wir es auf einige CSS-Raster anwenden können. Werfen wir einen Blick auf einige Rastercodes, die lose auf Chris Coyiers Don't Overthink It Grids basieren.
Dieser Code ist prägnant und sehr einfach zu implementieren. Allerdings müssen in unserem CSS nicht-semantische Klassennamen verwendet werden (.col-1-2 usw.). Wenn wir diese Ideen mit @extend überdenken, könnten wir etwa auf folgendes kommen:
Ärger im Paradies
Wie Sie im obigen Beispiel sehen können, ist @extend nicht der Held, den wir in dieser Situation haben wollen. Unsere Sass-Version kann semantische Klassennamen für unser HTML ergeben, aber unser abschließendes CSS wird mit aufgebläht.
Der Code, den Sass ausspuckt, ist zwar prägnanter, aber immer noch mit unseren verschiedenen ungenutzten Klassennamen wie? Column? und? col-1-3? Wir wollten diese wirklich nur als Vorlagen für @extend einrichten und brauchen sie nicht in unserem finalen CSS.
Placeholder Selectors in Sass 3.2
Hier kommt Sass 3.2 ins Spiel. Es gibt eine neue Funktion namens "Platzhalterauswahl". das wird unser kleines Problem gut lösen. Die guten Leute hinter Sass erkannten, dass Codierer häufig eine Art Basisklasse aufbauen. das existierte nur für ein @extend und erstellte Platzhalter-Selektoren, um dieses Verhalten ohne den unglücklichen Nebeneffekt einer nicht verwendeten Klasse in der abschließenden CSS zu unterstützen.
Im folgenden Beispiel können wir sehen, wie das funktioniert. Diesmal habe ich sowohl die Sass-Eingabe als auch die CSS-Ausgabe direkt nebeneinander eingefügt, damit Sie die Transformation leicht erkennen können. Lesen Sie die Kommentare, um zu sehen, was welches ist.
Wie Sie sehen können, konnten wir durch die Verwendung eines Prozentzeichens anstelle eines Punkts "col-2-3" definieren. als Platzhalterauswahl, der erweitert werden kann, aber nicht in unsere endgültige Ausgabe übernommen wird.
Platzhalterauswahl in unserem Raster verwenden
Lassen Sie uns diese in einem größeren Maßstab mit all dem Code implementieren, mit dem wir zuvor gearbeitet haben. So könnte dies aussehen:
Wie du sehen kannst, jetzt die meisten Unsere Klassen sind eigentlich nur Platzhalter-Selektoren, die keine Ausgabe in unser abschließendes CSS erhalten. Dies ermöglicht es uns, Klassennamen in unserem Sass sehr einfach und leicht zu implementieren, während wir die semantische Ausgabe beibehalten! Endlich das Beste aus beiden Welten!
Schlechte Form Sass
Nicht so schnell, warum habe ich die Ausgabe des obigen Codes nicht angezeigt? Weil es theoretisch großartig sein sollte. Wenn alles reibungslos verlief, würde die Ausgabe folgendermaßen lauten:
Leider ist Sass ein bisschen komisch, wenn es um die Verwendung mehrerer Erweiterungen geht. Hier ist die tatsächliche Ausgabe:
Wenn Sie scharfsinnig sind, haben Sie die redundanten Selektoren in den Zeilen vier und elf bereits bemerkt. Da die beiden Erweiterungen tatsächlich zwei verschiedene Platzhalter-Selektoren erweitern, behandelt Sass sie als separate Elemente in der Ausgabe, auch wenn sie leicht kombiniert werden könnten.
Wenn Sie sich vorstellen können, dass Ihre gesamte Site auf der Grundlage mehrerer Erweiterungen und Platzhalter-Selektoren aufgebaut wäre, wären die Entlassungen wahrscheinlich in der endgültigen Ausgabe reichlich.
Aufgrund der Funktionsweise von Kaskade und Vererbung kann ich feststellen, dass dies ein wirklich schwieriges Problem beim Codieren ist, also werde ich den Sass-Jungs eine Pause machen. Dennoch hoffe ich, dass dies in Zukunft angesprochen wird.
Was denkst du?
Sass @extend ist vielversprechend, um Ihre Effizienz mit CSS drastisch zu verbessern. Es ist auch ein sehr praktisches Werkzeug, wenn Sie versuchen, ein semantisches Rastersystem einzurichten, insbesondere in Verbindung mit der neuen Platzhalterauswahl von Sass 3.2.
Wie wir oben gesehen haben, hat diese Technik leider auch Nachteile. Denken Sie, dass die Profis die Nachteile wert sind? Können Sie sich einen besseren Weg vorstellen, um dies zu erreichen? Ich möchte es sehen, also hinterlasst mir einen Kommentar.