Share
Nachdem Sie nun die Grundlagen im Griff haben, tauche ich in diesem zweiten Tutorial über Neat Mixins etwas tiefer ein, erforsche einige andere Mixins und führe eine Funktion ein.
Wir werden uns das Folgende ansehen:
In den letzten Jahren wurde deutlich, wie wichtig flexible Designs sind, die auf die sich ständig weiterentwickelnde Landschaft der Bildschirmgrößen und -geräte reagieren. In diesem Sinne hat Bourbon Neat Ihren Rücken und bietet Ihnen einen eleganten Ansatz für die Verwaltung von Medienanfragen für Ihre Netze. Durch clevere, zielgerichtete Medienabfragen kann Ihr Layout an eine Vielzahl von Geräten angepasst werden, ohne dass ein Durcheinander entsteht. Responsive Design ist ein bleibendes Erlebnis und ein verantwortungsbewusster und nachhaltiger Umgang mit Medienfragen ist König.
Etwas, das man meiden sollte, könnte man nennen Fragen Sie Spaghetti-Ein Wirrwarr von Medienabfragen, dessen Pflege schnell schwierig wird. Das Verwalten von Medienabfragen ist von entscheidender Bedeutung. Dieses Mixin ist kein perfektes Gegenmittel, aber es ermutigt definitiv zu einem DRY - Umgang mit Medienanfragen, vor allem in Verbindung mit dem neuer Haltepunkt Funktion. Wie höre ich dich fragen??
Sie können Medienabfrageblöcke schreiben, die Rasterkontexte annehmen können. Angenommen, Sie haben zwei Elemente, die - wie in definiert - bis zu 12 Spalten hinzufügen $ total-Spalten in Ihrem _grid-einstellungen Datei. Diese Elemente umfassen 3 und 9 Spalten auf Desktops in Bildschirmgröße, was 1088px breite Außenbehälter ermöglicht. Erlauben Sie für kleinere Geräte oder Viewport-Größen die Medien [query] mixin weiß, bei welcher Größe der Kontext von 12 Spalten in eine andere Zahl geändert werden muss, und passt die Größe für die reagierenden Elemente in diesem neuen Kontext entsprechend an. Boom!
Haml:
html .container% beiseite 3 col / 1 col% Artikel 9 col / 2 col
Sass:
"css körperfarbe: weiß hintergrundfarbe: weiß
.container + äußere Container-Hintergrundfarbe: # f5f5f5
beiseite, artikelauffüllung: 10px rand unten: 20px höhe: 100px
beiseite + Abschnittsspalten (3) Hintergrundfarbe: # 81d4fa + Medien (max. Breite 700px, 4) + Abschnittsspalten (1)
article + span-column (9) Hintergrundfarbe: # e64a19 + media (max-width 700px, 4) + span-column (2) "
Hier habe ich die bereitgestellt Medien Mischen mit einer Medienfunktion über Max-Breite 700px und ein neuer Gitterkontext von 4 Spalten für die $ total-Spalten maximale Breite des Elements. Nachdem für beide ein neuer Gitterkontext festgelegt wurde beiseite und Artikel Elemente für die Größe des Darstellungsbereichs von 700px max, ich musste nur den Elementen mitteilen, wie viele Spalten sie jetzt innerhalb der neuen Summe von umfassen können 4 Säulen. Ich persönlich finde das ziemlich gut lesbar und einfach zu organisieren. Nach der Wiederverwendung wird es noch kühler Medienkontexte (Medienanfrage / Rasterkontext) über die neuer Haltepunkt Funktion und speichern Sie sie in einer Sass-Variablen.
Hinweis: Wenn Sie dieses Mixin nur mit einem Pixelwert versehen, ohne eine bestimmte Medienfunktion:
Sass:
css .some-responsive-element + span-column (8) + media (700px) + span-column (4)
dann wird Neat verwenden $ default-Funktion welches ist min-Breite. Das Bereitstellen eines Gitternetzkontexts ist optional und wird standardmäßig durch das vorgegebene Element vorgegeben $ total-Spalten in deiner _grid-einstellungen teilweise.
Sie fragen sich wahrscheinlich, was mit dem DRY-Ansatz los ist, den ich vor ein paar Absätzen erwähnt habe, richtig? Das ist der Geist!
Diese praktische benutzerdefinierte Sass-Funktion ist der Robin für Sie Medien Batman, hält dich davon ab, dich immer und immer wieder zu wiederholen. Wenn Sie Ihre Medienabfragen deutlich lesbarer und wiederverwendbarer gestalten möchten, sehe ich keinen guten Grund, warum Sie diesen Sidekick nicht dazu verwenden würden, Verbrechen gegen Medienabfragen zu bekämpfen.
Genug der Batman-Analogie. Einfach ausgedrückt, speichern Sie Medienkontexte (Medienabfrage / Rasterkontext) nur über Variablen und geben Ihnen die Möglichkeit, sie in allen Ihren Variablen wiederzuverwenden Medien Mixins. Das ist eine verdammt nützliche Extraktion! Lass uns einen Blick darauf werfen.
Sass:
"css $ tablet: Neuer Haltepunkt (min-width 768px max-width 1024px 4)
.einige responsive-Elemente + Spaltenspalten (3) + Medien ($ tablet) + Spaltenspalten (1)
.Some-Other-Responsive-Element + Span-Spalten (9) + Medien ($ tablet) + Span-Spalten (2) "
Super lesbar! Um sicherzugehen, dass wir uns auf derselben Seite befinden: Hier stellen Sie alle Medienfunktionen bereit, die Sie benötigen (aber keine Kommas, Doppelpunkte), oder, und) plus die Anzahl der Spalten für den neuen Rasterkontext und dann in einer Sass-Variablen speichern. Alles, was Sie noch tun müssen, ist Ihr Futter Medien Mixins mit der entsprechenden Variable und DRY sind sie.
Ich hoffe, Sie werden es zu schätzen wissen, wie sauber dies ist und wie einfach es ist, Ihre Layouts für verschiedene Haltepunkte an einem zentralen Ort anzupassen. Vorbei sind die Zeiten, in denen das Verwalten von Tonnen von layoutbezogenen Medienanfragen Sie schnell in einen Fantasy-Faustkampf mit Ihrem ehemaligen Ich führen konnte.
Ich würde mir gerne etwas mehr Zeit nehmen, um diese zu erkunden. Wenn Sie in Ihren Entwürfen nicht sehr häufig Tische verwenden (da Sie die Tage, an denen Sie Tische zu Layoutzwecken verwenden, zum Abschied küssen sollten, sollten Sie dies wahrscheinlich nicht tun), kann dies schwierig sein, sofort zu springen.
Sie haben zwei Hauptoptionen für die Verwendung dieses Mixins: mit das Argument Tabelle oder ohne irgendein Argument.
Sass:
css .some-row-element + zeile
Beim Benutzen Reihe ohne das Tabelle Argument, a Clearfix wird hinzugefügt und $ display bleibt auf den Standardwert gesetzt Block. Das bedeutet effektiv, dass alles, was nach dem benannten Element kommt, verwendet wird Reihe muss sein eigenes Ding in einer separaten "Reihe" beginnen.
Sass:
css .some-table-row-element + row (Tabelle)
Auf der anderen Seite verwenden Zeile (Tabelle), Sie haben es erraten, macht diese Zeile Teil eines Tabellenlayouts. Was unter der Haube passiert, ist unter anderem, dass diese Mischung gesetzt wird Anzeige: Tabelle und Tabellenlayout: behoben.
Es gibt eine weitere Option, mit der Sie dieses Mixin bereitstellen können. Sie können ein Argument übergeben ($ richtung mit LTR oder RTL) ändert die Richtung Ihres Layouts für diese bestimmte Zeile.
Sass:
css .some-row-element + row ($ direction: RTL)
Aber fangen wir am Anfang an. Das folgende Dummy-Beispiel hat 16 .Reihe Container, der die verwendet Reihe mixin. Mal sehen, was passiert, wenn Sie das weglassen Tabelle Streit.
Haml:
"html .container
.Zeile% img% img% img% img
% img% img% img% img
% img% img% img% img
% img% img% img% img "
Sass:
"css .container + Hintergrundfarbe für Außenbehälter: # f5f5f5
.Zeile + Zeile
img + span-column (1) height: 60px margin-bottom: 5px Hintergrundfarbe: # e64a19 "
Wie Sie sehen, behandelt der Browser die ersten vier .Reihe Container sind nicht an eine bestimmte Zeile gebunden und schweben nur nach unten, solange sie Platz haben.
Zwei .Reihe Container ergeben den gleichen Trick, aufeinander gestapelt.
Haml:
"html .container
.Zeile% img% img% img% img
.Zeile% img% img% img% img
% img% img% img% img
% img% img% img% img "
Nicht zu knifflig, denke ich. Ich bin mir zwar nicht sicher, wie nützlich das sein könnte, weil ich instinktiv lieber die Omega Mixin für einen solchen Anlass. Was jedoch ziemlich nutzlos erscheint, ist die Verwendung Zeile (Tabelle) Hier. Sie erhalten nur eine sehr lange Spalte, die alle 16 Elemente übereinander stapelt. Ich werde dir den unangenehmen Screenshot ersparen, aber du findest das Codepen-Beispiel, wenn du neugierig bist.
Bisher habe ich Ihnen die grundlegenden Mechanismen dieses Mixins gezeigt, insbesondere wenn Sie neu im Spiel sind. Jetzt nähern wir uns einem nützlichen Gebiet. Lass uns mit einem echten Tisch spielen.
Wenn Sie sich noch nicht mit Tabellen beschäftigt haben, empfiehlt es sich, Google zu starten, bevor Sie fortfahren. Nachfolgend finden Sie einen kleinen Survival-Führer für diejenigen, die ein paar Begriffe auffrischen müssen.
Hier haben wir eine Tabelle Element. Es umfasst a thead Tag, der über eine Zeile verfügt, um die verschiedenen Spaltenüberschriften über das Symbol anzuzeigen th Stichworte. Darunter findest du die Körper die die tatsächlichen Daten für jede Tabellenzeile enthält (tr) über die td Stichworte.
Haml:
"html .container
%Tabelle
% thead% tr% th Benutzername% th User_ID% th Favorite Pizza% th Pet% th Pet Name% th Favorite Game% tbody% tr% td Joe% td 112233% td Pepperoni% td Katze% td Gordon% td Splitter Cell% tr % td Jane% td 223311% td Pilze% td Hund% td Flaumig% td Metal Gear Solid V% tr% td Bob% td 331122% td Zwiebeln% td Fisch% td Sharky% td Little Big Planet 2 "
Sass:
"css körperfarbe: weiß hintergrundfarbe: weiß
.Behälter + Hintergrundfarbe des Außenbehälters: dunkler (# f5f5f5, 50%)
tr + row () text-align: center
Polsterung: oben: 10px unten: 20px
td height: 50px background: # 81d4fa padding-top: 2px "Dies führt zu einem unebenen, unangenehmen Table Blob, der sich nur bis zum Inhalt dieser Tabellendatenzellen erstreckt. Offensichtlich nicht sehr nützlich und schmerzhaft, wenn Sie manuell arbeiten möchten Beheben Sie das Problem, indem Sie ein paar CSS-Regeln verwenden, um die Dinge aufzuräumen.
Es sollte eine einfache Lösung für dieses Recht geben? Hinzufügen Tabelle als Argument und Anzeige: Tabelle und Tabellenlayout: behoben Zur Rettung kommen! Ganz zu schweigen von einer kleinen Spitze Mutter füllen unter der Haube.
Sass:
css tr + row (table) text-align: center
Hinweis: Ein festes Tabellenlayout wie dieses hat den Vorteil, dass die Tabelle nicht nur schneller ausgelegt wird, sondern dass die Spaltenbreite nicht vom Inhalt der Tabellenzellen abhängig ist. Sie erhalten gleichmäßig angeordnete Zeilen, die sich über die Breite des Tabellencontainers erstrecken. Eine Tabellendatenzelle entfernen (td) und Sie werden sehen, dass die anderen Elemente den Raum in dieser Reihe gleichmäßig aufteilen:
Schließen wir ein Beispiel, das das Standardverhalten von Tabellen zeigt ohne Verwendung der Reihe überhaupt mixin.
Sass:
"css körperfarbe: weiß hintergrundfarbe: weiß
.Behälter + Hintergrundfarbe des Außenbehälters: dunkler (# f5f5f5, 50%)
tr text-align: zentrieren
Polsterung: oben: 10px unten: 20px
td Höhe: 50px Hintergrund: # 81d4fa Polsteraufsatz: 2px "
Wie Sie sehen, sind die Zellen gleichmäßig verteilt, nutzen aber nicht den gesamten zur Verfügung stehenden Platz. Sie orientieren sich am längsten Inhalt pro Spalte und richten ihre Zellen so aus, dass sie sich entlang dieser Linien ausrichten.
Entschuldigung, dass ich zu viel darüber sprach Reihe Ich hoffe jedoch, dass dieser Abschnitt Kopfschmerzen mit Tabellen und Zeilen weniger schmerzlos gemacht hat.
Neat bietet eine einfache Lösung, wenn Sie möchten, dass ein Element das übergeordnete Element schnell füllt, indem es dieselbe Anzahl Spalten umfasst. Sie müssen keine Argumente angeben. Dieses Mixin ist nichts Besonderes, kann aber nützlich sein, wenn Sie sich mit Medienabfragen oder Tabellen befassen.
Hinweis: Verwenden Span-Spalten (12) anstatt Mutter füllen Die gesamte Breite eines Außenbehälters zu überspannen, wäre nicht der richtige Ansatz - es würde nur unnötiges Gepäck hinzufügen.
Haml:
html .container% beiseite Neben 3 Spalten | fill-parent% article Artikel 5 Spalten | Mutter füllen
Sass:
"css körperfarbe: weiß hintergrundfarbe: weiß
.behälter + oberer behälter rand: 10px hintergrundfarbe: # f5f5f5
beiseite, Artikelrand unten: 5px Höhe: 200px
beiseite + span-spalten (3) + übergeordnete hintergrundfarbe für füllung: # 81d4fa
article + span-column (5) + übergeordnete Hintergrundfarbe für den Hintergrund: # e64a19 "
Denken Sie daran, dass Elemente mit Mutter füllen Ignorieren Sie andere Elemente in derselben Zeile, und streben Sie danach, die gesamte Breite des übergeordneten Elements zu überspannen, ohne die Nachbarn zu berücksichtigen. Ich denke, das ist einfach genug, lasst uns weitergehen!
Jedes Element in Ihrem ordentlichen Raster hat ein $ default-layout-direction was eingestellt ist LTR (von links nach rechts) in Einstellungen / _grid.scss. Das heißt, hinter den Kulissen verwendet Neat immer ein Richtungskontext mit links nach rechts.
Unter der Haube ändert dieses Mixin nichts anderes als die Schwimmrichtung des aufgebrachten Elements zu ändern. Was ist Ordentlich ist das in einem direkten Zusammenhang, sagen wir links nach rechts, Sie können eine Reihe von Gitterelementen sammeln und ihre Richtung ändern rechts nach links-alles auf einmal unter einem Codeblock. Auch diese Lösung macht die Dinge kompakter und lesbarer für Sie und für jemanden, der mit einem bestimmten Projekt nicht so vertraut ist, leichter verständlich.
Haml:
HTML .container% beiseite 3 Spalten% Artikel 9 Spalten
Sass:
"css körperfarbe: weiß hintergrundfarbe: weiß
.behälter + oberer behälter rand: 10px hintergrundfarbe: # f5f5f5
beiseite, Artikelrand unten: 5px Höhe: 200px
+Richtungskontext (von rechts nach links) beiseite + Span-Spalten (3) Hintergrundfarbe: # 81d4fa
article + span-column (9) Hintergrundfarbe: # e64a19 "
Hier ist das gleiche Demo ohne Richtungskontext:
Hier ist ein anderes Beispiel. Im Moment nichts Neues, es ist nur so, dass die Säulen gleich groß sind und auch fließen rechts nach links.
Haml:
html .container% neben 3 Spalten% Artikel 3 Spalten
Sass:
"css körperfarbe: weiß hintergrundfarbe: weiß
.behälter + oberer behälter rand: 10px hintergrundfarbe: # f5f5f5
beiseite, Artikelrand unten: 5px Höhe: 200px
+Richtungskontext (von rechts nach links) beiseite + Span-Spalten (3) Hintergrundfarbe: # 81d4fa
article + span-column (3) Hintergrundfarbe: # e64a19 "
Das folgende kleine Tweak hat nur eines dieser drei Säulenelemente, die das Mixin verwenden, und sie schweben daher auf gegenüberliegenden Seiten des Containers. Nichts zu magisch, aber es könnte nützlich sein, es in Ihrer Trickkiste zu haben.
Sass:
"css körperfarbe: weiß hintergrundfarbe: weiß
.behälter + oberer behälter rand: 10px hintergrundfarbe: # f5f5f5
beiseite, Artikelrand unten: 5px Höhe: 200px
beiseite + Span-Spalten (3) Hintergrundfarbe: # 81d4fa
+Richtungszusammenhang (von rechts nach links) Artikel + Spaltenspalten (3) Hintergrundfarbe: # e64a19 "
In diesem letzten Abschnitt des Tutorials werden einige Mixins behandelt, die ich der Vollständigkeit halber erwähnen wollte, die ich jedoch persönlich vermeiden möchte, da sie mir nicht immer die erwarteten Ergebnisse geliefert haben. Wenn Sie eine bessere Erfahrung haben, lassen Sie es mich wissen. Abgesehen davon sind drei davon bald veraltet:
Accentsconagua
Reset-AnzeigeReset-Layout-RichtungAlles zurücksetzenDazu gibt es nicht viel zu sagen. Stellen Sie sich vor, Sie haben die Layoutrichtung aus irgendeinem Grund geändert und möchten wieder in die $ default-layout-direction (links nach rechts) Los geht's, der Standardkontext wird wiederhergestellt! Kein Argument nötig.
Sass:
"css .row + row ($ direction: RTL)
.Zeilenrücksetzung-Layout-Richtung "
Wann kann das nützlich sein? Gute Frage! In der Dokumentation wird meistens angegeben, wann Sie die Richtung in einer einzigen Zeile ändern müssen. Ich persönlich würde mir nicht zu viel Mühe geben. Zunächst einmal soll es zugunsten von a abgelehnt werden Richtung mixin, und es bereitete mir auch überraschende Kopfschmerzen, als ich mit Medienanfragen arbeiten wollte.
Um einen Codeblock zu erstellen, der die Anzeigeeigenschaften von Mixins in sich selbst ändert, haben Sie zwei Optionen, die Sie an dieses Mixin übergeben können: Block und Tabelle. Der erste ist offensichtlich und Tabelle fügt hinzu Anzeige: Tabellenzelle für dich. Tabellenzelle zwingt ein Element dazu, sich wie a zu verhalten td Element.
Sass:
css + display-context (table) .some-cell + span-column (2)
Angenommen, Sie haben die aktive Anzeige in geändert Tabelle wie im obigen Beispiel, Reset-Anzeige hilft Ihnen beim Umschalten auf Block. Es bedarf auch keiner Argumentation. Die Dokumentation besagt, dass es am nützlichsten ist, wenn sie auf einzelne Zeilen angewendet wird, deren Anzeigewerte geändert wurden.
Sass:
"css .row + row (Tabelle)
.Zeile + Reset-Anzeige "
Wenn du kombinieren willst Reset-Anzeige und Reset-Layout-Richtung In einem Zug bekommen Sie das mit Alles zurücksetzen-keine Argumente erforderlich. Sagen wir in einer Zeile, in der Sie die Anzeige geändert haben Tabelle und das $ default-layout-direction zu RTL und will zurückschalten.
Sass:
"css .row + row (Tabelle, RTL)
.Zeile + Reset-All "
Nun, das war lange. Vielen Dank, dass Sie es geschafft haben, und ich hoffe, Sie fanden es eine interessante Reise in Neat Mixin. Es gibt jedoch noch etwas zu besprechen. nämlich alle Variablen, die Sie zur Verfügung haben, um den Rahmen an Ihre Bedürfnisse anzupassen. Das nächste Tutorial ist ein kürzeres, aber damit endet unsere Berichterstattung über Neat. Wir sehen uns dort!
