Come utilizzare le funzioni in meno CSS

Le funzioni semplificano notevolmente la tua esperienza di programmazione e questo vale anche quando scrivi codice CSS.

Less CSS è un preprocessore CSS robusto e dinamico che ha raccolto notevole attenzione e popolarità negli ultimi anni. Come preprocessore, funge da estensione di "Vanilla CSS", il tradizionale linguaggio di styling CSS utilizzato nello sviluppo web, fornendo una serie di caratteristiche e funzionalità aggiuntive che migliorano l'esperienza di styling complessiva.

Se sei esperto nella scrittura di CSS standard, puoi passare senza problemi all'utilizzo di Less CSS senza una curva di apprendimento ripida. Questa compatibilità semplifica il mantenimento delle conoscenze CSS esistenti sfruttando al tempo stesso le funzionalità avanzate di Less.

Nella programmazione, una funzione è un blocco di codice che esegue un compito specifico. Puoi anche riutilizzarlo da qualche altra parte nel programma. Le funzioni solitamente acquisiscono dati, li elaborano e restituiscono i risultati.

Semplificano la riduzione del codice duplicato all'interno di un programma. Ad esempio, supponiamo che tu abbia un programma che calcola lo sconto in base al prezzo inserito dall'utente. In un linguaggio come JavaScript, potresti implementarlo in questo modo:

Quindi puoi chiamare la funzione e passare il fileprezzoe ilsoglia.

Astraendo la logica per il controllo degli sconti, il programma non solo è leggibile, ma ora hai un blocco di codice riutilizzabile che elabora lo sconto e restituisce il risultato. C'è molto di più che le funzioni possono fare, ma queste sono solo le nozioni di base.

Nei CSS tradizionali, come sviluppatore hai a disposizione un insieme molto limitato di funzioni. Una delle funzioni più popolari nei CSS è calc()funzione matematica che fa esattamente quello che sembra: esegue calcoli e utilizza il risultato come valore di proprietà nei CSS.

In Less CSS ci sono diverse funzioni che fanno molto più che semplici operazioni aritmetiche. Una funzione che potresti incontrare in Less è ilSe funzione. ILSe La funzione accetta tre parametri: una condizione e due valori. Il blocco di codice seguente mostra come utilizzare questa funzione:

Nel blocco di codice sopra, il compilatore Less controlla se la variabilelarghezza(definito dal@simbolo) è maggiore della variabilealtezza . Se la condizione è vera, la funzione restituisce il primo valore dopo la condizione (10px). Altrimenti, la funzione restituisce il secondo valore (20px).

Dopo la compilazione, l'output CSS dovrebbe assomigliare a questo:

Un booleano è una variabile che ha due possibili valori:VEROOfalso . Con ilbooleano() funzione in Less, è possibile memorizzare il valore vero o falso di un'espressione in una variabile per un uso successivo. Ecco come funziona.

Nel blocco di codice sopra, il compilatore Less controlla secolore del testo è rosso. Poi ilbg-colorela variabile memorizza il valore.

Il blocco di codice sopra si compila in qualcosa del genere:

La sintassi persostituire()la funzione è simile a questa:

cordarappresenta la stringa in cui vuoi cercare e sostituire.modelloè la stringa da cercare.modello può anche essere un'espressione regolare, ma solitamente è una stringa. Dopo una corrispondenza riuscita, il compilatore Less CSS lo sostituiscemodellocon ilsostituzione.

Facoltativamente, ilsostituire()la funzione può contenere anche il filebandiereparametro per i flag delle espressioni regolari.

Il blocco di codice riportato sopra dovrebbe risultare nel seguente risultato dopo la compilazione:

In Less CSS, usi virgole o spazi per definire un elenco di valori. Per esempio:

Puoi usare illunghezza()funzione per valutare il numero di elementi nell'elenco.

Puoi anche usare ilestratto() funzione per estrarre il valore in una posizione particolare. Ad esempio, se vuoi ottenere il terzo elemento nel file