Guida Less

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

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

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

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; //...

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

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

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

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

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