Share
I denne opplæringen vil vi dekke det mindre sløyfe (kombinert med noen andre mindre funksjoner som vi har diskutert i tidligere innlegg, for eksempel Mixins Guards og Color Functions). Looping er en virkelig nyttig funksjon i MINDRE, og det gjør at vi kan automatisere mange repeterende stylingoppgaver.
"Loop" er en programmeringsmetode som gjentar (eller itererer) en funksjon. Vanligvis brukes den til å behandle en liste over data. Hvis du har erfaring med noe annet programmeringsspråk, har du sikkert møtt en løkke før.
I MINDRE vil den grunnleggende syntaksen se litt ut som den:
.loop (@parameters) når (@condition) .loop (@parameters + 1); // repetere. // gjør saken her.
Vi definerer en MINDRE sløyfe på samme måte som hvordan vi definerer Mixin Guards, men denne gangen nest vi en MINDRE funksjon som øker de bestått parametrene: .loop (@parameters + 1). Avhengig av scenariet kan funksjonen også være en reduksjon: .loop (@parameters - 1). Funksjonen vil sløyfe og iterere så lenge tilstanden: når (@ kondisjon) er matchet.
La oss se hvordan vi kan bruke en løkke i ekteeksempler.
La oss anta at vi vil lage en varslingsboks, så vi definerer basestilene; noen polstring og en grense. Vi ønsker å lage flere varianter av varselboksen for å formidle ulike typer varsler. Du kan for eksempel ha en rød varselboks for å vise en feil, eller grønt for å rapportere en suksess. Med en løkke kan vi gjøre det enklere å sette inn disse stilene.
Til å begynne med, skriv ut listen over farger og navnvariasjoner i varselboksen. Teller deretter antall variasjoner ved hjelp av lengde() funksjon.
@colors: # ED5565, # A0D468, # F6BB42, # 5D9CEC; @names: feil, suksess, oppmerksomhet, info; @length: lengde (@colors);
Nå definerer vi løkken for å utføre listen:
.varselvariasjon (@names; @colors; @index) når (iscolor (ekstrakt (@colors, @index))) og (@index> 0) .alert-variasjon (@names; @colors; 1)); // nedgang.
Som du kan se over, kalles vår løkke .alert-variant, og det krever noen parametere:
Accentsconagua
@names: Vi vil bruke denne variabelen til å passere listen over varselnavnvariasjoner.@farger: Denne variabelen vil passere fargekodene til hvert respektive navn på @namesliste.@index: Denne variabelen vil passere antall navn og farger vi har i listen, og som vi også vil bruke til iterering av sløyfen.Vi har også definert en betingelse for å løpe løkken. Den første betingelsen vi angir i eksemplet ovenfor, vil vurdere om verdiene passerte inn i @farger er ekte farger i stedet for vilkårlig verdi (i så fall vil vi avbryte sløyfen). Det neste betingelsessettet stopper sløyfen når @index reduksjon har nådd 0.
Deretter definerer vi reglene som utgjør stilene.
.varselvariasjon (@names; @colors; @index) når (iscolor (ekstrakt (@colors, @index))) og (@index> 0) .alert-variasjon (@names; @colors; 1)); // nedgang. @name: extract (@names, @index); @color: ekstrakt (@colors, @index); .alert - @ name border-color: darken (@color, 10%); farge: mørkere (@color, 30%); bakgrunnsfarge: @color;
Siden vi bruker en liste som bærer varselboksens farger, må vi bruke MINDRE ekstrakt() funksjon for å hente den tilsvarende farge og navn innen hver iterasjon av sløyfen. Deretter legger vi navnet som klassevalgeren, mens fargen brukes til grense, farge, og bakgrunnsfarge eiendommer.
Vi er alle klare til å bruke sløyfen med inngangene:
.varslingsvariasjon (@names; @colors; @length);
Vi har en liste over fire farger sammen med en liste over deres respektive navn i @names variabel. Iterasjonen av vår sløyfe starter fra den fjerde fargen på listen og går ned til 0 som vi reduserer @index i hver iterasjon. For hver iterasjon vil sløyfen generere klassenavnet og stilreguleringsvarianten, derfor samler dette eksemplet seg i:
.varslingsfeil grense: # e8273b; farge: # 99101f; bakgrunnsfarge: # ed5565; .alert-suksess border: # 87c940; farge: # 537f24; bakgrunnsfarge: # a0d468; .alert-attention border: # f4a911; farge: # 986807; bakgrunnsfarge: # f6bb42; .alert-info border: # 2f80e7; farge: # 12509e; bakgrunnsfarge: # 5d9cec;
Du kan legge til flere i listen, og løkken vil kompilere den til en ny variant i et snap.
Du kan også bruke lignende tilnærming til å lage et stilmønster av andre brukergrensesnittelementer på nettstedet ditt, som for eksempel knappene, eller kanskje merkevarens farger på nettverksområdet ditt.
Nettverket er fulle av CSS-rammer, og selv om noen av dem er utformet for å være "en størrelse passer alle", kan det i virkeligheten ikke alltid være tilfelle. Ofte kan det hende du bare trenger det responsive nettet. Så hvorfor ikke lage din egen?
Looper gjør å lage grid klasser mindre stress. Følgende er en enkel sløyfe som genererer kolonne klassen navnene og bestemmer bredden prosentandel av hver enkelt:
.grid (@name; @columns; @index: 1) når (@index =< @columns) .grid(@name; @columns; (@index + 1)); .@name-@index width: ( percentage(@index / @columns) );
Legg merke til at vi nå utfører et økning i løkken. Av denne grunn stiller vi løkkebetingelsen med (@index =< @columns) ("Mens indeksen er mindre enn eller lik antall kolonner") for å hindre at iterasjonen overskrider kolonnenummeret.
Bruk denne sløyfen ved å sende navnet på den genererte klassevalgeren og kolonnens nummer på rutenettet. Når det gjelder navngivning, er det helt opp til deg, selv om du kanskje vil følge Bootstrap-konvensjonen til col-sm, col-md, og col-lg eller kanskje liten, medium, og stor Følg stiftelsesmønsteret slik:
@media bare skjerm og (min bredde: 360px) .grid (liten; 12);
Her har vi brukt vår .Nett() sløyfe og overlatt verdiene liten og 12. Dette vil kompilere til:
@media bare skjerm og (min bredde: 360px) .small-12 bredde: 100%; .small-11 bredde: 91.66666667%; .small-10 bredde: 83.33333333%; ... liten-1 bredde: 83.33333333%;
Som du kan se ovenfor, genererer vår sløyfe bare bare kolonnens bredde. Vi må også flyte disse kolonnene, og det finnes en rekke måter å gjøre det på. For eksempel kan vi legge til en klasseväljare, si .kolonne, nest den under @media spørringsdefinisjon, og "utvide" den i løkken.
// 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ærmere titt, og du vil finne at vi har definert :forlenge syntaks under en Mixin Guard. Dette vil sikre .kolonne velgeren gjelder bare for den første til ellevte kolonne, da vi forventer at den 12. kolonne spenner helt uten flyte innblanding.
Sløyfen vil generere følgende utdata når de kompileres:
@media bare skjerm og (min bredde: 360px) .column, .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 bredde: 100%; .small-11 bredde: 91.66666667%;
Om nødvendig kan du også tilpasse løkken for å generere klasser for å skyve kolonner til høyre. I Bootstrap er dette kjent som kompensasjon. Igjen, vil vi ikke generere dette for 12. kolonne siden motsetning av kolonnen ved 100% ville trolig være upraktisk.
.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); // Generate the offset classes & when ( @index < @columns ) .@name-offset-@index margin-left: percentage( (@index / @columns) );
Vår sløyfe skal nå generere et sett med nye klasser når de blir samlet:
@media bare skjerm og (min bredde: 360px) ... small-11 width: 91.66666667%; .small-offset-11 margin-left: 91.66666667%; .small-10 bredde: 83.33333333%; . small-offset-10 margin-left: 83.33333333%; .small-9 bredde: 75%; . small-offset-9 margin-left: 75%; ...
For noen kan ideen om løkken ikke være lett å forstå til å begynne med. Og det er ganske normalt; Det tok meg litt tid før jeg fant ut hva jeg skulle gjøre med løkker. Forhåpentligvis vil denne opplæringen gi deg en god start. Her har vi vist hvordan å generere UI-stilmønstre raskt. Vi har også lært hvordan vi skal lage vårt eget rutenett, slik at vi kan være mer bevisst på stilene på nettstedet vårt istedenfor å blinde legge til kodeoppblomstring med et rammeverk som vi ikke trenger.
Du er velkommen til å lese denne opplæringen et par ganger for å finne ut hvordan du kan utnytte sløyfen og gjøre din CSS-stil forfattere mer effektiv.
