Cos'è Less CSS e come lo si usa?

Se sei uno sviluppatore CSS esperto, sarai ben consapevole degli svantaggi del linguaggio. Manca ancora un supporto diffuso per funzionalità richieste da tempo come nidificazione e mixin.

Less (Leaner Style Sheets) è un'estensione di CSS con molte potenti funzionalità. Se conosci i CSS, imparare Less è facile perché la sintassi di Less è molto simile.

Come installare meno

Puoi installare Less con il Gestore di pacchetti JavaScript, NPM eseguendo:

npm installa meno -g

Dopo l'installazione, puoi compilare .meno file in .css usando il lessc comando. Ad esempio, il comando seguente viene compilato style.less e restituisce i risultati in a style.css file.

lessc style.less style.css

Variabili in meno

A differenza di CSS regolare, che utilizza l'operatore "--" per definire le variabili, Less definisce le variabili utilizzando il simbolo "@". Per esempio:

@larghezza:40 pixel;
@altezza:80 pixel;

Il blocco di codice crea semplicemente due variabili, width e height che contengono rispettivamente due valori: 40px e 80px. È pratica comune prendere i valori comunemente usati nei CSS e memorizzarli in una variabile. Ciò semplifica la modifica di tali valori in quanto esiste una sola origine di controllo.

Ecco come puoi usare le variabili in Less. Creare un indice.htm file e aggiungere il seguente codice boilerplate:

html>
<htmllang="it">
<Testa>
<metaset di caratteri="UTF-8">
<metahttp-equiv="Compatibile con X-UA"contenuto="IE=bordo">
<metanome="finestra"contenuto="larghezza=larghezza-dispositivo, scala-iniziale=1.0">
<collegamentorel="foglio di stile"href="stile.css">
<titolo>Usare meno CSStitolo>
Testa>
<corpo>
<div>
 Ciao dai bambini del pianeta Terra!
div>
corpo>
html>

Quindi, crea un file style.less file e aggiungere quanto segue:

@larghezza:400 pixel;
@altezza:400 pixel;
@centro-verticale: centro;
@txt-bianco: bianco;
@bg-rosso: RGB(220, 11, 11);
@font-40:40 pixel;
div {
larghezza: @larghezza;
altezza: @altezza;
Schermo: flettere;
colore: @txt-bianco;
colore di sfondo: @bg-rosso;
dimensione del font: @font-40;
}

Ora, quando puoi compilare il file .meno archiviare in .css usando il lessc comando:

lessc style.less style.css

Il CSS compilato dovrebbe assomigliare a questo:

div {
larghezza: 400px;
altezza: 400px;
Schermo: flettere;
colore: bianco;
colore di sfondo: #dc0b0b;
dimensione del font: 40px;
}

Quando apri il browser, questo è ciò che dovresti vedere:

C'è molto di più che puoi fare con le variabili in Less, come l'interpolazione che ti consente di usare variabili come nomi di selettori, URL e altro. Ecco un esempio di come implementare l'interpolazione variabile:

@selettore-personalizzato: contenitore;
.@{selettore-personalizzato} {
imbottitura: 10px;
margine: 10px;
confine: solido 10px;
}

Il blocco di codice sopra utilizza il file @{...} clausola per utilizzare una variabile come selettore. Una volta compilato, il codice risulterà in quanto segue:

.contenitore{
imbottitura: 10px;
margine: 10px;
confine: solido 10px;
}

Operazioni aritmetiche in Less

Less fornisce anche supporto per operazioni aritmetiche come addizione, sottrazione, divisione e moltiplicazione. Queste operazioni funzionano con costanti, valori e variabili.

@variabile-1:5px;
// Operazione di moltiplicazione tra variabile e costante
@variabile-2:@variabile-1 * 2
// Operazione di addizione tra valore e variabile.
@variabile-3:10px + @variabile-2

Come usare i mixin

I mixin ti consentono di riutilizzare gli stili (o il codice CSS) in tutto il foglio di stile. Altro Estensioni CSS come Sass offrono anche Mixin. Per illustrare come funzionano i mixin in Less, crea un index.htm e aggiungi il seguente codice:

html>
<htmllang="it">
<Testa>
<metaset di caratteri="UTF-8">
<metahttp-equiv="Compatibile con X-UA"contenuto="IE=bordo">
<metanome="finestra"contenuto="larghezza=larghezza-dispositivo, scala-iniziale=1.0">
<collegamentorel="foglio di stile"href="stile.css">
<titolo>Usare meno CSStitolo>
Testa>
<corpo>
<div>
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta
 architecto repudiandae ipsum animi velit id iste dolore reprehenderit
 dolorum! Voluptate quos autem culpa et sit, assumenda reiciendis
 facilis unde sequi.
div>
<P>
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta
 architecto repudiandae ipsum animi velit id iste dolore reprehenderit
 dolorum! Voluptate quos autem culpa et sit, assumenda reiciendis
 facilis unde sequi.
P>
<P>
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta
 architecto repudiandae ipsum animi velit id iste dolore reprehenderit
 dolorum! Voluptate quos autem culpa et sit, assumenda reiciendis
 facilis unde sequi.
P>
corpo>
html>

Quindi, crea un file style.less file e aggiungere le seguenti righe:

.testo di esempio() {
colore di sfondo: giallo;
}
.prima lettera() {
colore di sfondo: rosso;
colore: bianco;
dimensione del font: 30px;
}
P {
.testo di esempio();
}
P::prima lettera {
.prima lettera();
}

Nel blocco di codice sopra, ci sono due classi mixin: .testo di esempio E .prima lettera. Quando vuoi usare un mixin in un'altra parte del foglio di stile, fai semplicemente riferimento ad esso per nome con parentesi alla fine: .mixin(). Nel browser, dovresti vedere qualcosa di simile a questo:

Nidificazione dello stile in meno

Diciamo che hai un div padre con due elementi come figli: a P elemento e un altro div. Di solito, se vuoi modellare il P elemento con il colore rosso e il div elementi con il colore verde, è possibile utilizzare il seguente approccio:

divP {
colore: rosso;
}
div {
colore: verde
}

Less fornisce funzionalità simili attraverso l'uso di Nidificazione. Quindi, in questo caso, l'equivalente Less del blocco di codice sopra sarebbe:

div {
colore: verde;
P {
colore: rosso;
 }
}

Non solo è più facile avvolgere la testa, ma rende anche il codice più gestibile. Fare riferimento ai selettori genitore con less è più facile con il & operatore. Per esempio:

pulsante {
colore di sfondo: blu;
confine: nessuno;
&: al passaggio del mouse {
colore di sfondo: grigio;
trasformare: scala(1.2);
 }
}

Il blocco di codice sopra risulterà nel seguente codice CSS una volta compilato:

pulsante {
colore di sfondo: blu;
confine: nessuno;
}
pulsante: al passaggio del mouse {
colore di sfondo: grigio;
trasformare: scala(1.2);
}

Comprensione dell'ambito e delle funzioni in Less

Come i normali linguaggi di programmazione, le variabili hanno lo scopo del blocco in cui le definisci. Per illustrare questo, crea un nuovo file indice.htm file e aggiungi il primo codice boilerplate HTML fornito in precedenza. Quindi aggiungi il seguente blocco nel file corpo etichetta:

<divclasse="outer-div">
 Outer Div dovrebbe essere rosso.
<fratello />
<spanclasse="inner-div">
 Il div interno dovrebbe essere verde.
span>
div>

Nel style.less file, aggiungere le seguenti righe:

@bg-colore: rosso;
corpo {
dimensione del font: 40 pixel;
colore: bianco;
margine: 20px;
}
.inner-div {
@bg-colore: verde;
colore di sfondo: @bg-colore;
}
.outer-div {
colore di sfondo: @bg-colore;
}

IL inner-div block ridefinisce il bg-colore variabile, con ambito solo a quel blocco. Quindi il colore verde si applica solo a quella classe e non influisce sul globale bg-colore variabile. Quando compili e apri il risultato nel browser, questo è ciò che dovresti vedere:

Less fornisce anche utili funzioni che possono essere utili in alcuni scenari. Ad esempio, se desideri impostare uno stile solo se viene soddisfatta una determinata condizione, puoi farlo con il file Se funzione. Questa funzione ha la seguente sintassi:

Se((condizione), valore1, valore2)

Il codice ritorna valore1 se la condizione è soddisfatta e valore2 Altrimenti. Ecco un esempio:

@var1:20px;
@var2:20px;
div {
imbottitura: Se((@var1 = @var2), 10px, 20px);
}

Il blocco di codice sopra dovrebbe risultare nel seguente CSS una volta compilato:

div {
imbottitura: 10px;
}

Fai di più con meno e altre estensioni CSS

Migliaia di sviluppatori usano Less per rendere la scrittura di CSS un po' piacevole. Funzionalità straordinarie come funzioni, mixin e variabili sono solo una piccola parte di ciò che offre Less.

Less è adatto sia per piccoli che per grandi progetti. Vale la pena notare che vale la pena dare un'occhiata ad altri linguaggi di estensione CSS altrettanto sorprendenti come Sass e Stylus CSS.