Share
Susy ist ein leistungsfähiges Set von Sass-Mixins zum Erstellen von gitterbasierten Layouts.
Was ist so toll an Susy? In diesem Tutorial zeigen wir Ihnen die Grundlagen der Arbeit mit Susy. Hier finden Sie eine Liste mit Profis, die Sie berücksichtigen sollten:
Diese drei einfachen Profis sind mehr als genug, um Susy einen Blick zu gewähren. Lass uns anfangen!
Zunächst müssen Sie mit Sass vertraut sein, um es schreiben und kompilieren zu können. Zum Zeitpunkt der Erstellung dieses Artikels implementiert Susy einige Sass-Funktionen, die derzeit nicht von LibSass (dem C-basierten Sass-Compiler) unterstützt werden. Sie müssen daher die Ruby-Version von Sass verwenden. Beginnen Sie mit der Installation von Sass und lernen Sie die Verwendung von sehen Befehl, der für die Arbeit mit Sass im Allgemeinen sowie für Susy unerlässlich ist.
Als Nächstes müssen Sie Susy auf Ihrem Computer installieren. Da Susys einzige Abhängigkeit von Sass selbst besteht, können Sie die ZIP-Datei des Projekts von GitHub herunterladen und den Inhalt des Sass-Ordners in Ihr Projekt kopieren.
Als Nächstes müssen Sie Susy in Ihre Sass-Datei importieren.
@import "susy";
Dies setzt voraus, dass Sie sich in einem Verzeichnis mit dem Inhalt des Sass-Ordners befinden.
Susy ist im Grunde eine Menge von Mixins, die Funktionen in Sass ähneln. Diese Mixins werden in Ihrem Sass-Code aufgerufen. Wenn der Sass-Compiler ausgeführt wird, werden die Mixin-Definitionen in den Susy-Dateien geprüft und die korrekte Ausgabe bestimmt.
Das wichtigste Mixin in Susy ist das Spanne mixin, das so aussieht:
.Inhalt @inkludie Spanne (20%);
Das Spanne mixin setzt auch auf die Container mixin, wodurch Susy einen "Layout-Kontext" nennt.
.container @ include-Container (1180px);
Mit Susy können Sie auch Bereiche erstellen, die auf einer voreingestellten Anzahl von Spalten in einem Gridset basieren:
.Viertel @inkludie Spanne (4 von 12);
Die Leistung von Susy geht weit über das durchschnittliche Netz hinaus und erlaubt weniger als normale Netzkonfigurationen. Beginnen wir mit einem einfachen Beispiel: einem 9-Spalten-Layout.
.neunte @inkluderspanne (1 von 9);
Mit Susy können Sie die Konfiguration über die $ susy Variable. Wenn Sie eine Sass-Karte erstellen, können Sie eine Reihe von Voreinstellungen festlegen, wie Susy beim Erstellen Ihrer Spannweiten arbeitet. Susy implementiert a Layout mixin, das eine Konfigurationskarte ausgibt. Hier sind die Standardeinstellungen, die direkt aus Susys Dokumentation stammen.
$ susy: (fluss: ltr, rechnung: flüssigkeit, ausgabe: float, rinnenstellung: nach, behälter: auto, behälterstellung: zentrum, spalten: 4, rinnen: .25, spaltenbreite: false, global-box -sizing: content-box, last-flow: to, debug: (image: hide, color: rgba (# 66f, .25), Ausgabe: background, toggle: oben rechts,), use-custom: (Hintergrundbild) : true, Hintergrundoptionen: false, Box-Sizing: true, clearfix: false, rem: true,));
Sie können jede bestimmte Einstellung überschreiben, indem Sie sie zu Ihrer eigenen hinzufügen $ susy Karte:
$ susy: (Spalten: 16, letzter Fluss: von)
Häufig geänderte Optionen sind die Spaltenanzahl, die Rinnenbreite und die Ausgabe Möglichkeit. Jede dieser Konfigurationsoptionen hat etwas anderes.
In diesem Tutorial gehen wir nicht alle Konfigurationsoptionen durch (Susys Dokumentation erklärt diese sehr gut). Lassen Sie uns stattdessen ein paar praktische Beispiele zur Verwendung von Susy durchgehen.
Hier sehen wir eine grundlegende Verwendung der Span- und Container-Mixins:
Hinweis: Um die Spalten in voller Breite zu sehen, werfen Sie einen Blick auf die Vollbildversion.
Bei diesem Beispiel sind einige Dinge zu beachten. Wir haben ein Beispiel für ein Dashboard erstellt. Wir haben auch ein kleines bisschen JavaScript hinzugefügt, das gefälschte Benutzerbilder von der uifaces.com-API abruft.
Die Susy-spezifischen Stücke sind die Spalten. In diesem Beispiel haben wir ein responsives Layout unter Verwendung von erstellt @include span () Syntax. An einigen Stellen nutzen wir auch die Schachtelungsfunktionen von SCSS. Beachten Sie, dass Susy gut zu Ihrer normalen Medienabfragesyntax passt. Wir haben aus dem Container einen Container erstellt .Statistiken Abschnitt mit @include container;.
Es sollte auch beachtet werden, dass es in diesem bestimmten Beispiel geschachtelte Spalten gibt. das .Benutzerbild Elemente sind in einer anderen Susy-Spalte verschachtelt. Dies funktioniert einwandfrei, da Susy standardmäßig Fluidbreiten verwendet.
Als Nächstes sehen Sie eine Verwendung von Susys Kurzform für das Layout mit einem Raster, das in der Mitte größere Spalten als außen hat.
In diesem Beispiel verwenden wir verschiedene Optionen, die für Sie neu aussehen sollten. Zunächst erstellen wir unser Markup mit Haml. Haml ist ein Whitespace-sensitiver Markup-Ersatz für HTML, der auf Ruby basiert. Stellen Sie sich vor, es sei ein bisschen wie ein Präprozessor für HTML.
Schauen wir uns an, was unser Beispiel schafft.
.Ziegel-Liste
Dies schafft eine Diese eingerückte Zeile wiederholt 30 Mal das, was innerhalb derselben Einrückung verschachtelt ist. Dies bedeutet, dass das, was ausgegeben wird, innerhalb des div liegt, das wir oben erstellt haben Wir sehen das in unserem Ein weiterer wichtiger Teil dieser Linien ist die Das Susy-Gitter ist in diesem Beispiel einzigartig. Wir richten eine Gittervariable mit der Zeile ein: Diese Variable wird in unserem Browser an Susy übergeben Wir verwenden dieses Raster dann im gesamten Beispiel und platzieren unser Hier ist das gleiche Beispiel mit einem anderen asymmetrischen Layout. Wie Sie sehen, sind nicht-konventionelle Netze einfach zu erreichen, und Susy macht die leistungsstarke Netzsteuerung zu einer erfreulichen Aufgabe. Susy bietet eine flexiblere und weniger meinungsfähige Möglichkeit, eigene Rasterlayouts zu erstellen, ohne dass Sie dazu gezwungen werden, einen vorgegebenen Satz von CSS zu übernehmen. Dank dieser Flexibilität kann Susy schnell erlernt und in ein Projekt eingebunden werden, ohne sich in jeder von Ihnen erstellten CSS-Deklaration vollständig dafür einsetzen zu müssen. Unabhängig davon, ob Sie feststellen, dass Susy für Sie richtig ist oder nicht, sollten Sie als Front-End-Entwickler zumindest alle Vorverarbeitungswerkzeuge kennen, die Ihnen zur Verfügung stehen. Sie werden zu einem Schlüsselwerkzeug für moderne Entwickler.Ziegel-Liste.- 30. mal do | i |
.Ziegel-Liste. Das | i | Teil läuft im Strom Index, Dies ist die Zählung der Schleife, beginnend bei 0. Also zum Beispiel beim fünften Mal durch die Schleife, ich wäre gleich 4. .col% img src: "http://hhhhold.com/jpeg/700?v=#i"
30 mal Schleife. Das .col schafft ein div mit einer Klasse von col. Das % img … schafft ein # , Damit können Sie das ausdrucken ich Indexvariable (dies wird aufgerufen Interpolation, Wenn Sie mehr erfahren möchten, erklärt Hugo Giraudel alles, was Sie wissen müssen. Wir verwenden diese Variable in der URL als Parameter, damit die geladenen Bilder nicht alle gleich sind.$ grid: (1 2 5 5 2 1);
Spanne mixin ruft und liest Erstellen Sie ein Raster mit sechs Spalten. Die erste Spalte sollte eine relative Breite von 1 haben, die zweite Spalte eine relative Breite von 2, die dritte Spalte eine relative Breite von 5 usw..col divs an den Startpositionen der 1., 3. und 5. Spalte und 2 Spalten mit der n-te Kind CSS-Regel Wenn wir dasselbe Raster so ändern würden, dass jede Spalte die gleiche relative Spaltenbreite hat, würde es so aussehen.Fazit
Accentsconagua