Share
I den här handledningen kommer vi att heltäckande täcka de mindre slinga (i kombination med några andra mindre funktioner som vi har diskuterat i tidigare inlägg, som Mixins Guards och Color Functions). Looping är en riktig användbar funktion i MINDER och det gör att vi kan automatisera många repetitive stylinguppgifter.
"Loop" är en programmeringsmetod som upprepar (eller itererar) en funktion. Vanligtvis används den för att behandla en lista med data. Om du har erfarenhet av något annat programmeringsspråk har du säkert stött på en slinga innan.
I MINDER skulle den grundläggande syntaxen se lite ut så här:
.loop (@parameters) när (@condition) .loop (@parameters + 1); // iterera. // gör saken här.
Vi definierar en LESS-slinga på samma sätt som vi definierar Mixin Guards, men den här gången nestar vi en MINDRE funktion som ökar de överförda parametrarna: .slinga (@parametrar + 1). Beroende på scenariot kan funktionen också vara en minskning: .slinga (@parametrar - 1). Funktionen kommer att slinga och iterera så länge som villkoret: när (@ villkor) matchas.
Låt oss se hur vi kan använda en slinga i verkliga exempel.
Låt oss anta att vi vill skapa en varningsruta, så vi definierar basstilarna; några vadderingar och en gräns. Vi skulle vilja skapa flera varianter av varningsrutan för att förmedla olika typer av varningar. Du kan till exempel ha en röd varningsruta för att visa ett fel eller grön för att rapportera en framgång. Med en slinga kan vi göra inställningen av dessa stilar ganska praktiska.
Börja med att ange listan över färger och namnvariationer i varningsrutan. Räkna sedan antalet variationer med längd() fungera.
@ colors: # ED5565, # A0D468, # F6BB42, # 5D9CEC; @namn: fel, framgång, uppmärksamhet, info; @ längd: längd (@färger);
Nu definierar vi slingan för att utföra listan:
.varningsvariation (@names; @colors; @index) när (iscolor (extrakt (@colors, @index))) och (@index> 0) .alert-variant (@names; @colors; 1)); // minskning.
Som du kan se ovan kallas vår slinga .alert-variant, och det kräver några parametrar:
Accentsconagua
@names: Vi kommer att använda denna variabel för att vidarebefordra listan över varningsnamnvariationer.@färger: Denna variabel kommer att passera färgkoderna för respektive namn på @nameslista.@index: Denna variabel kommer att passera antalet namn och färger vi har i listan, och som vi också kommer att använda för iterering av slingan.Vi har också definierat ett villkor för att köra slingan. Det första villkoret vi ställer in i ovanstående exempel kommer att utvärdera om värdena passerade in i @färger är reella färger istället för godtyckliga värden (i så fall kommer vi att avbryta slingan). Nästa inställningssats stoppar slingan när @index minskningen har nått 0.
Därefter definierar vi de regler som utgör stilar.
.varningsvariation (@names; @colors; @index) när (iscolor (extrakt (@colors, @index))) och (@index> 0) .alert-variant (@names; @colors; 1)); // minskning. @name: extrakt (@namn, @index); @color: extrakt (@colors, @index); .alert - @ name border-color: darken (@color, 10%); färg: mörkare (@färg, 30%); bakgrundsfärg: @color;
Eftersom vi använder en lista som innehåller varningsfältets färger måste vi använda den MINDERA extrahera() funktionen för att hämta motsvarande färg och namn inom varje iteration av slingan. Sedan lägger vi till namnet som klassväljare medan färgen appliceras på gräns, Färg, och den bakgrundsfärg egenskaper.
Vi är alla redo och redo att använda slingan med ingångarna:
.varningsvariation (@names; @colors; @length);
Vi har en lista med fyra färger tillsammans med en lista över respektive namn i @names variabel. Upplösningen av vår slinga börjar från den fjärde färgen på listan och går ner till 0 som vi minskar @index i varje iteration. För varje iteration kommer slingan att generera klassnamnet och variationen i stilreglerna, därför sammanfattar detta exempel i:
.varningsfel gränsen: # e8273b; färg: # 99101f; bakgrundsfärg: # ed5565; .alert-success border: # 87c940; färg: # 537f24; bakgrundsfärg: # a0d468; .alert-attention border: # f4a911; färg: # 986807; bakgrundsfärg: # f6bb42; .alert-info border: # 2f80e7; färg: # 12509e; bakgrundsfärg: # 5d9cec;
Du kan lägga till mer i listan, och loopen kommer att kompilera den till en ny variant i en snap.
Du kan också använda ett liknande tillvägagångssätt för att skapa ett stilmönster av andra användargränssnitt på din webbplats, t.ex. Knapparna, eller kanske varumärkets färger på din nätverkssida.
Webben stämmer överens med CSS-ramar - och även om några av dem är utformade för att vara "en storlek passar alla", kan det i verkligheten inte alltid vara fallet. Sällan kanske du bara behöver det responsiva nätet. Så varför inte skapa din egen?
Slingor gör att skapa rutnät klasser mindre stress. Följande är en enkel slinga som genererar kolumnklassnamnen och bestämmer breddprocenten för varje:
.rutnät (@name; @columns; @index: 1) när (@index =< @columns) .grid(@name; @columns; (@index + 1)); .@name-@index width: ( percentage(@index / @columns) );
Observera att vi nu utför en ökning inom slingan. Av den anledningen ställer vi upp slingförhållandet med (@index =< @columns) ("Medan indexet är mindre än eller lika med antalet kolumner") för att förhindra att iterationen överskrider kolonnnumret.
Använd denna loop genom att skicka namnet på den genererade klassväljaren och kolonnnumret på rutnätet. När det gäller namngivning är det helt upp till dig, men du kanske vill följa Bootstrap-konventionen av col-sm, col-md, och col-lg eller kanske små, medium, och stor efter stiftelsen mönstret, som så:
@media bara skärm och (min bredd: 360px) .grid (liten; 12);
Här har vi använt vårt .rutnät() loop och skickade till värdena små och 12. Detta kommer att kompilera i:
@media-skärm och (min-bredd: 360px) .small-12 bredd: 100%; .small-11 bredd: 91.66666667%; .small-10 bredd: 83.33333333%; ... liten-1 bredd: 83.33333333%;
Som du kan se ovan, genererar vår slinga för närvarande bara kolumnernas bredd. Vi måste också flyta dessa kolumner, och det finns ett antal sätt att göra det. Till exempel kan vi lägga till en klassväljare, säg .kolumn, bo under det @media förfrågningsdefinition och "förlänga" den i loopen.
// loop.grid (@name; @columns; @index: 1) när (@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);
Ta en närmare titt och du kommer att upptäcka att vi har definierat :förlänga syntax under en Mixin Guard. Detta kommer att säkerställa .kolumn väljaren gäller endast den 1: a till den 11: e kolumnen, eftersom vi förväntar oss att den 12: e kolumnen spänner helt utan flyta interferens.
Slingan genererar följande utmatning när den sammanställs:
@media-skärm och (min bredd: 360px) .kolumn, .small-11, .small-10, .small-9, .small-8, .small-7, .small-6, .small-5 , .small-4, .small-3, .small-2, .small-1 float: left; .small-12 bredd: 100%; .small-11 bredd: 91.66666667%;
Om det behövs kan du också anpassa slingan för att generera klasser för att trycka kolumner till höger. I Bootstrap är detta känt som kompensation. Återigen kommer vi inte att generera det här för den 12: e kolumnen, eftersom vi kompenserar kolumnen 100% skulle troligen vara opraktiskt.
.rutnät (@name; @columns; @index: 1) när (@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) );
Vår slinga bör nu generera en uppsättning nya klasser när de sammanställs:
@media bara skärm och (min bredd: 360px) ... small-11 width: 91.66666667%; .small-offset-11 margin-left: 91.66666667%; .small-10 bredd: 83.33333333%; .small-offset-10 margin-left: 83.33333333%; .small-9 bredd: 75%; .small-offset-9 margin-left: 75%; ...
För vissa kan inte idéen om slingan vara lätt att förstå till att börja med. Och det är ganska normalt; Det tog mig tid innan jag kom fram med vad jag skulle göra med loopar. Förhoppningsvis kommer denna handledning att ge dig en bra start. Här har vi visat hur du snabbt genererar UI-stilmönster. Vi har också lärt oss hur vi skapar vårt eget nätsystem, så att vi kan vara mer medvetna om stilerna på vår hemsida istället för att blint lägga till kodblåsning med ett ramverk som vi inte behöver.
Ta gärna igenom denna handledning ett par gånger för att ta reda på hur hävstångseffekten används och effektivisera din CSS-stil.
