Share
In diesem Tutorial werden wir die LESS ausführlich behandeln Schleife (gepaart mit einigen anderen LESS-Funktionen, die wir in vorherigen Beiträgen behandelt haben, wie z. B. Mixins Guards und Color Functions). Looping ist eine wirklich hilfreiche Funktion in LESS und ermöglicht die Automatisierung vieler sich wiederholender Styling-Aufgaben.
"Loop" ist eine Programmiermethode, die eine Funktion wiederholt (oder wiederholt). Normalerweise wird es zur Verarbeitung einer Datenliste verwendet. Wenn Sie Erfahrung mit einer anderen Programmiersprache haben, haben Sie sicherlich schon eine Schleife gesehen.
In LESS würde die grundlegende Syntax ein bisschen so aussehen:
.loop (@parameters) when (@bedingung) .loop (@parameters + 1); // iterieren // mach das hier.
Wir definieren eine LESS-Schleife in ähnlicher Weise wie wir Mixin Guards definieren, aber diesmal verschachteln wir eine LESS-Funktion, die die übergebenen Parameter erhöht: .Schleife (@Parameter + 1). Je nach Szenario kann die Funktion auch ein Dekrement sein: .Schleife (@ Parameter - 1). Die Funktion wird wiederholt und wiederholt, solange die Bedingung gilt: wann (@bedingung) Ist abgestimmt.
Mal sehen, wie wir in realen Beispielen eine Schleife verwenden können.
Nehmen wir an, wir möchten ein Benachrichtigungsfeld erstellen, also definieren wir die Basisstile. etwas Polsterung und eine Grenze. Wir möchten verschiedene Varianten der Alarmbox erstellen, um verschiedene Alarmtypen zu vermitteln. Möglicherweise haben Sie beispielsweise ein rotes Warnfeld, um einen Fehler anzuzeigen, oder ein grünes, um einen Erfolg zu melden. Mit einer Schleife können wir diese Stile ziemlich bequem gestalten.
Legen Sie zunächst die Liste der Farben und Namensvariationen der Alarmbox fest. Zählen Sie dann die Anzahl der Variationen mit Länge() Funktion.
@colors: # ED5565, # A0D468, # F6BB42, # 5D9CEC; @names: Fehler, Erfolg, Aufmerksamkeit, Info; Länge: Länge (@colors);
Nun definieren wir die Schleife, um die Liste auszuführen:
.Alert-Variation (@names; @colors; @index) when (iscolor (Auszug (@colors, @index))) und (@index> 0) .alert-Variation (@names; @colors; (@index - 1)); // dekrementieren
Wie Sie oben sehen können, heißt unsere Schleife .Alert-Variation, und es erfordert einige Parameter:
Accentsconagua
@names: Wir werden diese Variable verwenden, um die Liste der Alertnamenvariationen weiterzugeben.@Farben: Diese Variable übergibt die Farbcodes der jeweiligen Namen auf der @namesListe.@Index: Diese Variable wird die Anzahl der Namen und Farben übergeben, die wir in der Liste haben, und die wir auch für das Durchlaufen der Schleife verwenden werden.Wir haben auch eine Bedingung definiert, unter der die Schleife ablaufen soll. Die erste Bedingung, die wir in dem obigen Beispiel setzen, bewertet, ob die Werte in den übergegangen sind @Farben sind echte Farben anstelle von beliebigen Werten (in diesem Fall werden wir die Schleife abbrechen). Die nächste eingestellte Bedingung stoppt die Schleife, wenn die @Index Dekrement hat erreicht 0.
Als Nächstes definieren wir die Regeln, aus denen sich die Stile zusammensetzen.
.Alert-Variation (@names; @colors; @index) when (iscolor (Auszug (@colors, @index))) und (@index> 0) .alert-Variation (@names; @colors; (@index - 1)); // dekrementieren @name: extrahieren (@names, @index); @color: extrahieren (@colors, @index); .alert - @ name Rahmenfarbe: dunkler (@color, 10%); Farbe: dunkler (@color, 30%); Hintergrundfarbe: @color;
Da wir eine Liste verwenden, die die Farben der Alert-Box enthält, müssen wir die WENIGER verwenden Extrakt() Funktion, um die entsprechende Farbe und den Namen innerhalb jeder Iteration der Schleife abzurufen. Dann hängen wir den Namen als Klassenselektor an, während die Farbe auf den übernommen wird Rand, Farbe, und das Hintergrundfarbe Eigenschaften.
Wir sind alle fertig und können die Schleife mit den Eingängen verwenden:
.Alert-Variation (@names; @colors; @length);
Wir haben eine Liste von vier Farben zusammen mit einer Liste ihrer jeweiligen Namen im @names Variable. Die Iteration unserer Schleife beginnt mit der vierten Farbe der Liste und geht bis nach unten 0 wie wir die dekrementieren @Index in jeder Iteration. Für jede Iteration generiert die Schleife den Klassennamen und die Variation der Stilregeln. Daher wird dieses Beispiel wie folgt kompiliert:
.Alert-Error border: # e8273b; Farbe: # 99101f; Hintergrundfarbe: # ed5565; .alert-success border: # 87c940; Farbe: # 537f24; Hintergrundfarbe: # a0d468; .alert-attention border: # f4a911; Farbe: # 986807; Hintergrundfarbe: # f6bb42; .alert-info border: # 2f80e7; Farbe: # 12509e; Hintergrundfarbe: # 5d9cec;
Sie können der Liste mehr hinzufügen, und die Schleife kompiliert sie zu einer neuen Variation in einem Snap.
Sie können einen ähnlichen Ansatz auch verwenden, um ein Stilmuster für andere Elemente der Benutzeroberfläche Ihrer Website zu erstellen, z. B. die Schaltflächen oder (möglicherweise) die Markenfarben Ihrer Netzwerk-Site.
Das Web ist voll mit CSS-Frameworks - und obwohl einige von ihnen darauf ausgelegt sind, „one size fits all“ zu sein, kann dies in der Realität nicht immer der Fall sein. Oft benötigen Sie nur das responsive Grid. Warum also nicht eigene erstellen??
Durch Schleifen wird das Erstellen von Gitternetzklassen einfacher. Das Folgende ist eine einfache Schleife, die die Spaltenklassennamen generiert und den Breitenprozentsatz von jedem einzelnen bestimmt:
.grid (@name; @columns; @index: 1) when (@index =< @columns) .grid(@name; @columns; (@index + 1)); .@name-@index width: ( percentage(@index / @columns) );
Beachten Sie, dass wir jetzt ein Inkrement innerhalb der Schleife durchführen. Aus diesem Grund setzen wir die Schleifenbedingung mit (@index =< @columns) ("Solange der Index kleiner oder gleich der Anzahl der Spalten ist"), um zu verhindern, dass die Iteration die Spaltennummer überschreitet.
Verwenden Sie diese Schleife, indem Sie den Namen für den generierten Klassenselektor und die Spaltennummer des Rasters übergeben. Wenn es um das Benennen geht, liegt es ganz bei Ihnen, ob Sie der Bootstrap-Konvention von folgen möchten col-sm, col-md, und col-lg oder vielleicht klein, Mittel, und groß dem Foundation-Muster folgend:
@media only screen und (min-width: 360px) .grid (klein; 12);
Hier haben wir unsere verwendet .Gitter() Schleife und übergeben die Werte klein und 12. Dies wird kompilieren in:
@media only screen und (min-width: 360px) .small-12 width: 100%; .small-11 Breite: 91,66666667%; .klein-10 Breite: 83.33333333%; … Small-1 width: 83.33333333%;
Wie Sie oben sehen können, generiert unsere Schleife derzeit nur die Spaltenbreite. Wir müssen auch diese Spalten verschieben, und es gibt verschiedene Möglichkeiten, dies zu tun. Wir können zum Beispiel einen Klassenselektor hinzufügen .Säule, nist es unter dem @Medien Abfragedefinition und "erweitern" sie innerhalb der Schleife.
// die Schleife .grid (@name; @columns; @index: 1) when (@index =< @columns) .grid(@name; @columns; (@index + 1)); .@name-@index width: ( percentage(@index / @columns) ); & when ( @index < @columns ) &:extend(.column); // using the loop @media only screen and (min-width: 360px) .column float: left; .grid(small; 12);
Schauen Sie genauer hin und Sie werden feststellen, dass wir das definiert haben :erweitern Syntax unter einem Mixin Guard. Damit wird sichergestellt .Säule Der Selektor gilt nur für die 1. bis 11. Spalte, da wir davon ausgehen, dass sich die 12. Spalte vollständig ohne erstreckt schweben Interferenz.
Die Schleife erzeugt beim Kompilieren die folgende Ausgabe:
@media only screen und (min-width: 360px) .spalte, .klein-11, .klein-10, .klein-9, .klein-8, .klein-7, .klein-6, .klein-5 , 4-klein, 3-klein, 2-klein, 1 (float: left; .klein-12 Breite: 100%; .small-11 Breite: 91,66666667%;
Bei Bedarf können Sie die Schleife auch anpassen, um Klassen für das Verschieben von Spalten nach rechts zu generieren. In Bootstrap wird dies als Versatz bezeichnet. Wir werden dies nicht für die zwölfte Spalte generieren, da die Spalte durch versetzt wird 100% wäre wahrscheinlich unpraktisch.
.grid (@name; @columns; @index: 1) when (@index =< @columns) .grid(@name; @columns; (@index + 1)); .@name-@index width: ( percentage(@index / @columns) ); & when ( @index < @columns ) &:extend(.column); // Generate the offset classes & when ( @index < @columns ) .@name-offset-@index margin-left: percentage( (@index / @columns) );
Unsere Schleife sollte jetzt beim Zusammenstellen eine Reihe neuer Klassen generieren:
@media only screen und (min-width: 360px) … small-11 width: 91.66666667%; .small-offset-11 Rand links: 91,66666667%; .klein-10 Breite: 83.33333333%; .small-offset-10 margin-left: 83.33333333%; .klein-9 Breite: 75%; .small-offset-9 Rand links: 75%; …
Für manche ist die Idee der Schleife von Anfang an nicht leicht zu verstehen. Und das ist ganz normal. Ich habe einige Zeit gebraucht, bis ich herausgefunden habe, was ich mit Loops machen soll. Hoffentlich gibt Ihnen dieses Tutorial einen guten Start. Hier haben wir gezeigt, wie Sie UI-Stilmuster schnell generieren können. Wir haben auch gelernt, wie wir ein eigenes Rastersystem erstellen können, sodass wir uns mit den Stilen auf unserer Website bewusster auskennen können, anstatt Code bloat mit einem Framework hinzuzufügen, das wir nicht benötigen.
Lesen Sie dieses Tutorial ein paar Mal, um herauszufinden, wie Sie die Schleife nutzen und die CSS-Erstellung effizienter gestalten können.
