Share
În acest tutorial, vom cuprinde în totalitate mai puțin buclă (împreună cu câteva alte caracteristici LESS pe care le-am discutat în postările anterioare, cum ar fi Mixins Guards și Funcții de culoare). Looping-ul este o funcție reală utilă în LESS și ne permite să automatizeze multe sarcini repetitive de styling.
"Loop" este o metodă de programare care repetă (sau iterează) o funcție. De obicei, este utilizat pentru procesarea unei liste de date. Dacă aveți experiență cu orice alt limbaj de programare, cu siguranță ați întâlnit o bucla înainte.
În LESS, sintaxa de bază ar arăta cam așa:
.buclă (@parameters) atunci când (@condition) .op (@parametre + 1); // iterați. // faceți lucrul aici.
Definim o buclă LESS într-un mod similar cu modul în care definim gărzile Mixin, dar de data aceasta am cuibărit o funcție mai mică care va crește parametrii trecuți: .buclă (@parametre + 1). În funcție de scenariu, funcția poate fi, de asemenea, o scădere: .buclă (@ parameters - 1). Funcția va intra în buclă și va repeta atâta timp cât condiția: când (@ condiție) este potrivită.
Să vedem cum putem folosi o bucla în exemple din lumea reală.
Să presupunem că vrem să creăm o casetă de alertă, așa că definim stilurile de bază; unele umpluturi și graniță. Am dori să creăm mai multe variante ale casetei de alertă pentru a transmite diferite tipuri de alerte. Puteți, de exemplu, să aveți o casetă de avertizare roșie pentru a afișa o eroare sau verde pentru a raporta un succes. Cu o buclă, putem face ca aceste stiluri să fie destul de convenabile.
Pentru început, stabiliți lista culorilor și a variațiilor de nume ale casetei de alertă. Apoi numărați numărul de variații folosind lungime() funcţie.
@ culori: # ED5565, # A0D468, # F6BB42, # 5D9CEC; @ nume: eroare, succes, atenție, informații; @ length: lungime (@ culori);
Acum definim buclă pentru a efectua lista:
.(@names; @colors; @index) atunci când (iscolor (extract (@color, @index))) și (@index> 0) 1)); // decrement.
După cum puteți vedea mai sus, se cheamă bucla noastră .alertă de variație, și necesită niște parametri:
Accentsconagua
@names: vom folosi această variabilă pentru a transmite lista variațiilor de nume de alertă.@colors: această variabilă va trece codurile de culoare ale fiecărui nume respectiv pe @nameslistă.@index: această variabilă va transmite numărul de nume și culori pe care le avem în listă și pe care le vom folosi și pentru iterarea buclă.De asemenea, am definit o condiție pe care să conducem bucla. Prima condiție stabilită în exemplul de mai sus va evalua dacă valorile au trecut în @colors sunt culori reale în loc de valori arbitrare (caz în care vom anula buclele). Următorul set de condiții va opri buclă atunci când @index decrement a ajuns 0.
Apoi, definim regulile care alcătuiesc stilurile.
.(@names; @colors; @index) atunci când (iscolor (extract (@color, @index))) și (@index> 0) 1)); // decrement. @name: extract (@ nume, @ index); @color: extract (@colori, @index); .alert - @ nume limita-culoare: întunecat (@color, 10%); culoare: întunecată (@color, 30%); fundal-culoare: @color;
Deoarece folosim o listă care poartă culorile cutie de alertă, va trebui să folosim LESS extrage() pentru a recupera culoarea și numele corespunzătoare în fiecare iterație a buclă. Apoi, adăugăm numele ca selector de clasă, în timp ce culoarea este aplicată frontieră, culoare, si culoare de fundal proprietăţi.
Suntem cu toții pregătiți să folosim bucla cu intrările:
.alertă-variație (@ nume; @ culori; @ lungime);
Avem o listă de patru culori împreună cu o listă a numelor lor respective în @names variabil. Repetarea bucla noastră începe de la a patra culoare a listei și merge până la 0 așa cum decrementăm @index în fiecare iterație. Pentru fiecare iterație, buclă va genera numele clasei și variația regulilor stilului, prin urmare, acest exemplu se compilează în:
.alertă-eroare frontieră: # e8273b; culoare: # 99101f; fundal-culoare: # ed5565; .alert-succes frontieră: # 87c940; culoare: # 537f24; fundal-culoare: # a0d468; . atenție-atenție frontieră: # f4a911; culoare: # 986807; fundal-culoare: # f6bb42; .alert-info margine: # 2f80e7; culoare: # 12509e; fundal-culoare: # 5d9cec;
Puteți adăuga mai multe în listă, iar buclă îl va compila într-o nouă variantă într-un snap.
De asemenea, puteți aplica o abordare similară pentru a crea un model de stil al altor elemente de interfață pe site-ul dvs., cum ar fi butoanele sau (poate) culorile de marcă ale site-ului dvs. de rețea.
Webul este plin de cadre CSS - și, deși unele dintre ele sunt concepute să fie "o mărime potrivită tuturor", în realitate acest lucru nu s-ar putea întâmpla întotdeauna. Destul de des, este posibil să aveți nevoie doar de grila receptivă. Deci, de ce nu creați-vă propriul?
Buclele fac ca clasele de grilă să fie mai puțin complicate. Următoarea este o buclă simplă care generează numele clasei coloanelor și determină procentajul de lățime al fiecăruia:
.grilă (@name; @columns; @index: 1) atunci când (@index =< @columns) .grid(@name; @columns; (@index + 1)); .@name-@index width: ( percentage(@index / @columns) );
Observați că acum realizăm o creștere în buclă. Din acest motiv, am setat condiția de buclă cu (@index =< @columns) ("În timp ce indicele este mai mic sau egal cu numărul de coloane") pentru a împiedica repetarea iterației depășind numărul coloanei.
Utilizați această buclă trecând numele pentru selectorul de clasă generat și numărul coloanei din rețea. Când vine vorba de a numi, depinde în întregime de dvs., deși ați putea dori să urmați convenția Bootstrap din col-sm, col-md, și col-lg sau poate mic, mediu, și mare după modelul Fundației, așa cum este cazul:
numai ecranul @media și (min-width: 360px) .grid (mic; 12);
Aici ne-am folosit .grilă() buclă și i-au trecut valorile mic și 12. Aceasta se va compila în:
Numai ecranul @media și (min-width: 360px) .small-12 width: 100%; . mică-11 (lățime: 91,66666667%; . mică-10 lățime: 83,33333333%; ... mic-1 (lățime: 83,33333333%;
După cum puteți vedea mai sus, bucla noastră generează în prezent doar lățimea coloanelor. Trebuie, de asemenea, să plutiți aceste coloane și există o serie de modalități de a face acest lucru. De exemplu, putem adăuga un selector de clasă, să zicem .coloană, cuiburi sub @mass-media definiția interogării și "extinderea" acesteia în interiorul bucla.
// buclele .grid (@name; @columns; @index: 1) când (@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);
Uitați-vă mai atent și veți descoperi că am definit-o :extinde sintaxă sub o gardă Mixin. Acest lucru va asigura .coloană Selectorul se aplică numai coloanelor 1 până la 11, deoarece ne așteptăm ca coloana a douăsprezecea să se întindă pe deplin fără pluti amestec.
Bucla va genera următoarea ieșire atunci când este compilată:
numai @ ecran media și (min-lățime: 360px) .colna, .small-11, .small-10, .small-9, .sal-8, .small-7, .sal-6, .small-5 , mici-4, mici-3, mici-2, mici-1 float: left; . mici-12 (lățime: 100%; . mică-11 (lățime: 91,66666667%;
Dacă este necesar, puteți personaliza, de asemenea, bucla pentru a genera clase pentru a împinge coloanele spre dreapta. În Bootstrap, acest lucru este cunoscut sub numele de offsetting. Din nou, nu vom genera acest lucru pentru coloana a 12-a din momentul compensării coloanei 100% ar fi probabil nepractic.
.grilă (@name; @columns; @index: 1) atunci când (@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) );
Buclele noastre ar trebui să genereze acum un set de clase noi atunci când sunt compilate:
@media numai pe ecran și (min-width: 360px) ... small-11 width: 91.66666667%; . mică-offset-11 margin-left: 91.66666667%; . mică-10 lățime: 83,33333333%; . mică-offset-10 margine-stânga: 83,33333333%; . mică-9 (lățime: 75%; . mică-offset-9 margin-left: 75%; ...
Pentru unii, ideea de bucla poate să nu fie ușor de înțeles pentru a începe. Și asta este normal; mi-a luat ceva timp înainte de a mă gândi ce să fac cu buclele. Sperăm că acest tutorial vă va oferi un început bun. Aici am arătat cum să generăm rapid modele de stil UI. De asemenea, am învățat cum să creăm propriul nostru sistem de grilă, astfel încât să putem fi mai conștienți de stilurile de pe site-ul nostru, în loc să adăugăm orbește codul bloat cu un cadru de care nu avem nevoie.
Simțiți-vă liber să citiți acest tutorial de câteva ori pentru a afla cum să pârghieți bucla și să vă creați stilul de creație CSS mai eficient.
