Guida Less
Introduzione a Less CSS: cos’è e come funziona
In questa guida introduttiva, illustreremo in maniera sintetica alcuni dei concetti fondamentali di Less CSS, un'interessante libreria che consente di superare alcuni dei limiti di CSS. Faremo riferimento alla versione 3.0.4 che è l'ultima disponibile al momento della stesura di questa lezione. Prima di proseguire, potrebbe essere utile consultare la seguente lezione sulla sintassi e la terminologia del linguaggio...
I commenti in Less CSS
In Less CSS abbiamo a disposizione due tipi di sintassi per i commenti. La prima permette di inserire
dei commenti nei file con estensione .less senza che vengano poi copiati nei file .css.
Si tratta dei commenti su singola riga che prevedono l'uso di due slash '//'.
I commenti su una o più righe...
Less CSS variabili
Le variabili costituiscono sicuramente uno degli strumenti più utili presenti in
Less e rendono il codice più semplice da mantenere evitando di dover ripetere
lo stesso valore in diverse parti dei fogli di stile.
Nonostante siano per certi versi simili alle variabili CSS (custom properties),
presentano delle peculiarità che le differenziano da quest'ultime.
...
Operazioni e funzioni predefinite in Less CSS
Less consente di eseguire le funzioni aritmetiche basilari come addizione, sottrazione, moltiplicazione e divisione su valori numerici, sui colori e utilizzando le variabili. Vediamo un semplice esempio per capire meglio di cosa si tratta.
/* file style.less */
@default-padding: 20px;
p {
// operazioni su colori
background-color: salmon + 2; // salmon: #fc8272
color: #424242 / 2;
//...
Regole annidiate in Less CSS
In questa lezione vedremo come organizzare il codice scritto in Less.
Affronteremo come primo argomento quello delle regole annidate
che costituiscono una delle funzionalità più interessanti.
In Less è possibile strutturare il codice annidando una o più regole all'interno di un'altra regola.
Vediamo un primo esempio che permette di capire come questa funzionalità può risultare estremamente
...
Less CSS extend
Un'altra funzionalità interessante è rappresentata dalla pseudo-classe extend che
può essere usata attraverso due diverse sintassi equivalenti, ovvero applicando la pseudo-classe
direttamente ad un selettore o all'operatore '&' all'interno di una regola.
/* file style.less */
.foo:extend(.bar) {}
// le due sintassi sono equivalenti
.foo {
&:extend(.bar);
}
Nell'esempio riportato sopra, alla classe foo vengono assegnate
le diverse dichiarazioni...
Less CSS @import
Al contrario del linguaggio CSS, la direttiva @import può essere inserita in qualsiasi
punto di un file con estensione .less e non per forza all'inizio del file stesso.
La direttiva @import permette
di organizzare meglio il codice separandolo in diversi file. Per esempio potremmo organizzare
il codice in diversi file in cui inseriamo le regole specifiche per...
Less CSS source maps
Uno dei problemi introdotti dall'uso di un preprocessore come Less, specialmente quando si utilizzano vari file che vengono importati con la direttiva @import, si manifesta in fase di debugging. Se infatti apriamo gli strumenti per sviluppatori del browser e ispezioniamo le regole applicate a un certo elemento, viene fatto riferimento solo al file CSS finale.
In un progetto di grandi...
Less CSS mixin
In quest'ultima lezione parleremo dei mixin, una delle funzionalità più interessanti presenti in Less. Abbiamo già accennato brevemente all'argomento nelle precedenti lezioni. In questa cercheremo di capire meglio di cosa si tratta.
Cosa sono i mixin in Less
Si tratta di uno strumento configurabile che consente di riutilizzare il codice e aggiungere delle dichiarazioni in una regola in maniera dinamica. Possiamo...