Come utilizzare le funzioni in meno 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 stile CSS utilizzato nel web sviluppo, fornendo una serie di caratteristiche e funzionalità aggiuntive che migliorano lo stile generale esperienza.

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 contempo le funzionalità avanzate di Less.

Cosa sono le funzioni e perché sono importanti?

Nella programmazione, una funzione è un blocco di codice che esegue un compito specifico. Puoi anche riutilizzarlo da qualche altra parte nel programma. Le funzioni di solito prendono i 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:

funzionecheckSconto(prezzo, soglia){
Se (prezzo >= soglia){
permettere sconto = 5/100 * prezzo;
ritorno`Il tuo sconto è di $${sconto}`;
 } altro {
ritorno`Siamo spiacenti, questo articolo non è idoneo per uno sconto. `
 }
}

Quindi puoi chiamare la funzione e passare il file prezzo e il soglia.

permettere prezzo = prompt("Inserisci il prezzo dell'articolo: ")
alert (checkDiscount (prezzo, 500))

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 basi.

Comprensione delle funzioni in Less CSS

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

P{
colore di sfondo: rosso;
larghezza: cal(13px- 4px);
}

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

@larghezza: 10px;
@altezza: 20px;
div{
margine:Se((@larghezza > @altezza), 10px, 20px)
}

Nel blocco di codice sopra, il compilatore Less controlla se la variabile larghezza (definito dal @ simbolo) è maggiore della variabile altezza. Se la condizione è vera, la funzione restituisce il primo valore dopo la condizione (10px). In caso contrario, la funzione restituisce il secondo valore (20px).

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

div {
margine: 20px;
}

Come usare un valore booleano in Less

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

@colore del testo: rosso;
@bg-colore: boolean(@text-color = rosso);

Nel blocco di codice sopra, il compilatore Less controlla se colore del testo è rosso. Poi il bg-colore la variabile memorizza il valore.

div{
colore di sfondo: Se(@bg-colore,verde giallo);
}

Il blocco di codice sopra viene compilato in qualcosa del genere:

div {
colore di sfondo: verde;
}

Sostituzione del testo all'interno di una stringa con la funzione replace()

La sintassi per il sostituire() la funzione si presenta così:

sostituire(corda, modello, sostituzione, bandiere)

corda rappresenta la stringa in cui vuoi cercare e sostituire. modello è la stringa da cercare. modello può anche essere un'espressione regolare, ma di solito è una stringa. Dopo una corrispondenza riuscita, il compilatore Less CSS lo sostituisce modello con il sostituzione.

Facoltativamente, il sostituire() funzione può anche contenere il bandiere parametro per flag di espressioni regolari.

@corda: "Ciao";
@modello: "ciao";
@sostituzione: "io";
div::Prima{
contenuto: sostituire(@corda,@modello,@sostituzione)
}

Il blocco di codice di cui sopra dovrebbe comportare quanto segue dopo la compilazione:

div::Prima {
contenuto: "CIAO";
}

Elenca le funzioni in Less CSS

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

@drogheria: "pane", "banana", "Patata", "latte";

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

@risultato: lunghezza(@alimentari);

Puoi anche usare il estratto() funzione per estrarre il valore in una posizione particolare. Ad esempio, se vuoi ottenere il terzo elemento nel file drogheria elenco, fai quanto segue:

@terzo-elemento: estratto(@alimentari, 3);

A differenza dei normali linguaggi di programmazione in cui l'indice dell'elenco inizia da 0, l'indice iniziale di un elenco in Less CSS è sempre 1.

Un'altra funzione di elenco che potrebbe tornare utile durante la creazione di siti Web con Less è il allineare() funzione. Accetta tre parametri. Il primo parametro specifica la posizione iniziale nell'intervallo. Il secondo parametro indica la posizione finale e l'ultimo parametro specifica il valore di incremento o decremento tra ciascun elemento nell'intervallo. Se non fornito, il valore predefinito è 1.

div {
 margine: intervallo (10px, 40px, 10);
}

Il blocco di codice sopra dovrebbe essere compilato come segue:

div {
 margine: 10px 20px 30px 40px;
}

Come puoi vedere, il compilatore Less CSS parte da 10px, incrementando il valore precedente di 10, fino a raggiungere la posizione finale (40px).

Costruire un sito web semplice con meno funzioni CSS

È ora di riunire tutto ciò che hai imparato e creare un semplice progetto con Less CSS. Crea una cartella e aggiungi indice.htm E style.less File.

Apri il indice.htm file e aggiungere il seguente codice HTML.

html>
<htmllang="it">
<Testa>
<metaset di caratteri="UTF-8">
<metanome="finestra"contenuto="larghezza=larghezza-dispositivo, scala-iniziale=1.0">
<collegamentorel="foglio di stile/meno"tipo="testo/css"href="stile.less" />
<titolo>Documentotitolo>
Testa>
<corpo>
<divclasse="contenitore">
<h1>
h1>
div>
<copionesrc=" https://cdn.jsdelivr.net/npm/less" >copione>
corpo>
html>

Nel blocco di codice sopra, c'è un genitore "contenitore"div con un vuoto h1 elemento. IL src attributo sul copione tag punta al percorso del compilatore Less CSS.

Senza questo copione tag, il browser non sarà in grado di comprendere il tuo codice. In alternativa, puoi installare Less CSS sul tuo computer tramite Node Package Manager (NPM), eseguendo il seguente comando nel terminale:

npm installa -g meno

Ogni volta che sei pronto per compilare il file .meno file, eseguire semplicemente il comando seguente, assicurandosi di specificare il file in cui il compilatore deve scrivere l'output.

lessc style.less style.css

Nel style.less file, creare due variabili vale a dire: larghezza del contenitore E contenitore-bg-color per rappresentare la larghezza e il colore di sfondo del file "contenitore"div rispettivamente.

@contenitore-larghezza: 50rim;
@container-bg-color: giallo;

Quindi, crea tre variabili vale a dire: corda, modello, E sostituzione. Quindi aggiungi gli stili per il file "contenitore"div e il h1 elemento.

@corda: "Ciao dai bambini del pianeta Terra!";
@modello: "figli del pianeta Terra!";
@sostituzione: "abitanti di Plutone!";
.contenitore{
larghezza: @contenitore-larghezza;
colore di sfondo: @container-bg-color;
imbottitura: Se(@contenitore-larghezza > 30rim, allineare(20px, 80 pixel, 20),"");
confine: solido;
}
h1:Primogenito::Dopo{
contenuto: sostituire(@corda,@modello,@sostituzione);
}

Nel blocco di codice sopra, il allineare() funzione imposta il imbottitura proprietà sul "contenitore"div. Il compilatore Less dovrebbe compilare il file style.less file nel seguente:

.contenitore {
larghezza: 50rem;
colore di sfondo: giallo;
imbottitura: 20px 40px 60px 80px;
confine: solido;
}
h1:Primogenito::Dopo {
contenuto: "CiaodaILabitantiDiPlutone!";
}

Quando apri il file indice.htm file nel browser, questo è ciò che dovresti vedere:

Migliora la tua produttività con i preprocessori CSS

Nei normali linguaggi di programmazione, le funzioni riducono la quantità di codice necessario per scrivere e minimizzano gli errori. I preprocessori CSS come Less forniscono diverse funzionalità che semplificano la scrittura di codice CSS.

I preprocessori CSS sono utili quando si lavora con file di grandi dimensioni. Semplificano il debug dei problemi, migliorando così la produttività dello sviluppatore.