Share
In questo tutorial copriremo tutto il MENO ciclo continuo (abbinato ad alcune altre caratteristiche di LESS che abbiamo discusso nei post precedenti, come le guardie Mixin e le Funzioni di colore). Looping è una funzionalità molto utile in LESS e ci consente di automatizzare molte attività di styling ripetitive.
"Loop" è un metodo di programmazione che ripete (o itera) una funzione. In genere, viene utilizzato per elaborare un elenco di dati. Se hai esperienza con qualsiasi altro linguaggio di programmazione, sicuramente avrai già incontrato un ciclo.
In LESS, la sintassi di base sembrerebbe un po 'così:
.loop (@parameters) when (@condition) .loop (@parameters + 1); // itera. // fai la cosa qui
Definiamo un ciclo LESS in modo simile a come definiamo le Protezioni Mixin, ma questa volta annidiamo una funzione LESS che incrementerà i parametri passati: .loop (@parameters + 1). A seconda dello scenario, la funzione potrebbe anche essere un decremento: .loop (@parameters - 1). La funzione andrà in loop e itererà fino a quando la condizione: quando (@condition) è abbinato.
Vediamo come possiamo usare un loop negli esempi del mondo reale.
Supponiamo di voler creare una finestra di avviso, quindi definiamo gli stili di base; un po 'di imbottitura e un bordo. Vorremmo creare diverse varianti della casella di avviso per trasmettere diversi tipi di avviso. Ad esempio, potresti avere una casella di avviso rossa per mostrare un errore o verde per segnalare un successo. Con un loop, possiamo rendere piuttosto conveniente l'impostazione di questi stili.
Per cominciare, impostare l'elenco di colori e le varianti del nome della casella di avviso. Quindi conta il numero di variazioni usando il lunghezza() funzione.
@colors: # ED5565, # A0D468, # F6BB42, # 5D9CEC; @names: errore, successo, attenzione, informazioni; @length: length (@colors);
Ora definiamo il loop per eseguire l'elenco:
.alert-variation (@names; @colors; @index) when (iscolor (extract (@colors, @index))) e (@index> 0) .alert-variation (@names; @colors; (@index - 1)); // decremento.
Come puoi vedere sopra, viene chiamato il nostro ciclo .allarme-variante, e richiede alcuni parametri:
Accentsconagua
@names: useremo questa variabile per passare l'elenco delle variazioni del nome dell'avviso.@colori: questa variabile passerà i codici colore di ogni rispettivo nome sul @nameselenco.@indice: questa variabile passerà il numero di nomi e colori che abbiamo all'interno della lista, e che useremo anche per iterare il ciclo.Abbiamo anche definito una condizione su cui eseguire il ciclo. La prima condizione che impostiamo nell'esempio precedente valuterà se i valori sono passati nel @colori sono colori reali invece di valori arbitrari (nel qual caso abortiremo il ciclo). Il prossimo set di condizioni fermerà il ciclo quando il @indice il decremento ha raggiunto 0.
Successivamente, definiamo le regole che costituiscono gli stili.
.alert-variation (@names; @colors; @index) when (iscolor (extract (@colors, @index))) e (@index> 0) .alert-variation (@names; @colors; (@index - 1)); // decremento. @name: extract (@names, @index); @color: extract (@colors, @index); .alert - @ nome border-color: darken (@color, 10%); colore: scurisci (@ colore, 30%); background-color: @color;
Dal momento che stiamo usando una lista che trasporta i colori della casella di avviso, avremo bisogno di usare il MENO estratto() funzione per recuperare il colore e il nome corrispondenti all'interno di ogni iterazione del ciclo. Quindi, aggiungiamo il nome come selettore di classe, mentre il colore viene applicato al confine, colore, e il colore di sfondo proprietà.
Siamo tutti pronti e pronti per utilizzare il loop con gli input:
.alert-variation (@names; @colors; @length);
Abbiamo una lista di quattro colori insieme ad una lista dei loro rispettivi nomi nel @names variabile. L'iterazione del nostro ciclo inizia dal 4 ° colore dell'elenco e scende a 0 mentre decrementiamo il @indice in ogni iterazione. Per ogni iterazione, il ciclo genererà il nome della classe e la variazione delle regole di stile, quindi questo esempio viene compilato in:
.alert-error border: # e8273b; colore: # 99101f; background-color: # ed5565; .alert-success border: # 87c940; colore: # 537f24; background-color: # a0d468; .alert-attention border: # f4a911; color: # 986807; background-color: # f6bb42; .alert-info border: # 2f80e7; colore: # 12509e; background-color: # 5d9cec;
Puoi aggiungere altro nella lista e il ciclo lo compila in una nuova variazione in un attimo.
Puoi anche applicare un approccio simile per creare un modello di stile di altri elementi dell'interfaccia utente sul tuo sito Web, come i pulsanti o (forse) i colori del marchio del tuo sito di rete.
Il web è pieno di framework CSS e, sebbene alcuni siano progettati per essere "taglia unica", in realtà potrebbe non essere sempre così. Molto spesso, potresti aver bisogno solo della griglia reattiva. Quindi, perché non crearne di tuoi?
I loop rendono la creazione di classi di griglia meno complicate. Quello che segue è un semplice ciclo che genera i nomi delle classi di colonne e determina la percentuale di larghezza di ciascuno:
.grid (@name; @columns; @index: 1) quando (@index =< @columns) .grid(@name; @columns; (@index + 1)); .@name-@index width: ( percentage(@index / @columns) );
Si noti che stiamo eseguendo un incremento all'interno del ciclo. Per questo motivo, impostiamo la condizione del ciclo con (@index =< @columns) ("Mentre l'indice è minore o uguale al numero di colonne") per impedire che l'iterazione superi il numero di colonna.
Utilizzare questo ciclo passando il nome per il selettore di classe generato e il numero di colonna della griglia. Quando si tratta di nominare dipende interamente da te, anche se potresti voler seguire la convenzione Bootstrap di col-sm, col-md, e col-lg o forse piccolo, medio, e grande seguendo il modello della Fondazione, in questo modo:
@media solo schermo e (min-larghezza: 360px) .grid (piccolo; 12);
Qui abbiamo usato il nostro .griglia() loop e passato ad esso i valori piccolo e 12. Questo verrà compilato in:
@media solo schermo e (larghezza minima: 360px) .small-12 larghezza: 100%; .small-11 larghezza: 91,66666667%; .small-10 width: 83.33333333%; ... small-1 width: 83.33333333%;
Come puoi vedere sopra, il nostro loop al momento genera solo la larghezza delle colonne. Abbiamo anche bisogno di fluttuare queste colonne, e ci sono diversi modi per farlo. Ad esempio, possiamo aggiungere un selettore di classe, ad esempio .colonna, annidalo sotto il @media definizione della query e "estenderla" all'interno del ciclo.
// il ciclo .grid (@name; @columns; @index: 1) quando (@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);
Dai un'occhiata più da vicino e scoprirai che abbiamo definito il :estendere sintassi sotto un Mixin Guard. Questo garantirà il .colonna il selettore si applica solo alla 1a alla 11a colonna, poiché ci aspettiamo che la dodicesima colonna si estenda completamente senza la galleggiante interferenza.
Il ciclo genererà il seguente risultato quando compilato:
@media solo schermo e (min-larghezza: 360px) .colonna, .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 width: 100%; .small-11 larghezza: 91,66666667%;
Se necessario, è anche possibile personalizzare il ciclo per generare classi per spingere le colonne a destra. In Bootstrap, questo è noto come compensazione. Ancora una volta, non genereremo questo per la dodicesima colonna dopo aver compensato la colonna per 100% sarebbe probabilmente poco pratico.
.grid (@name; @columns; @index: 1) quando (@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) );
Il nostro ciclo dovrebbe ora generare un insieme di nuove classi quando compilato:
@media solo schermo e (min-width: 360px) ... small-11 width: 91,66666667%; .small-offset-11 margin-left: 91.66666667%; .small-10 width: 83.33333333%; .small-offset-10 margin-left: 83.33333333%; .small-9 width: 75%; .small-offset-9 margin-left: 75%; ...
Per alcuni, l'idea del ciclo potrebbe non essere facile da comprendere per cominciare. E questo è abbastanza normale; mi ci è voluto un po 'di tempo prima di capire cosa fare con i loop. Speriamo che questo tutorial ti dia un buon inizio. Qui abbiamo mostrato come generare rapidamente modelli di stile dell'interfaccia utente. Abbiamo anche imparato a creare il nostro sistema di grid, in modo da poter essere più consapevoli degli stili sul nostro sito web invece di aggiungere ciecamente codice gonfio con un framework che non abbiamo bisogno.
Sentiti libero di leggere questo tutorial un paio di volte per scoprire come sfruttare il ciclo e rendere più efficiente la creazione di stili CSS.
