breve introduzione a LESS (dinamicità nei CSS) www.lesscss.org

1. INTRODUZIONE
LESS
LESS extends CSS with dynamic behavior such
asvariables, mixins, operations and functions.
Saverio M.

2. CHE COSA E’?
LESS CSS è una libreria che ci permette realizzare fogli di stile
utilizzando una sintassi più simile a quella dei linguaggi di
programmazione, offrendo non pochi vantaggi specie sul piano della
manutenibilità del codice.

3. LA SUA FORZA …
CSS LESS

4. I LIMITI DEI CSS
 Con il supporto ai CSS nei browser, lo sviluppo di layout grafici e di
interfacce complesse ha subito una decisa evoluzione.
 Negli anni tante cose sono cambiate: si sono fatti strada nuovi standard e
il supporto da parte dei browser è notevolmente migliorato (almeno per
alcuni ).
 Ciò che non è quasi per nulla variato è il modo con cui i CSS
vengono scritti.
CSS
Linguaggio statico
Descrittivo e non compilato
Privo di qualsiasi tipo di logica di programmazione o dinamicità.

5. … SUPERARE QUESTI LIMITI #1
Less permette quindi di aggiungere funzionalità specifiche:
 Le variabili
 I mixins
 Operazioni matematiche
 Dichiarazioni nidificate.
VANTAGGIO di LESS
Non è necessario imparare un nuovo linguaggio di programmazione o
adottare una sintassi differente.
Le funzionalità vengono interpretate in parte grazie a poche dichiarazioni
specifiche e in parte scrivendo il proprio codice in modo più strutturato,
logico ed elegante.

6. … SUPERARE QUESTI LIMITI #2
 Un file Less non può essere direttamente interpretato dai browser ma
deve essere pre-processato per poter ottenere il file .css finale.
Esiste un compilatore specifico a riga di comando.
 Non è necessario lanciare il compilatore tutte le volte che eseguite una
modifica al file .less. Esiste infatti una opzione per eseguirlo in
modalità interattiva.

7. COME SI INSTALLA
 OSX / LINUX
Nel caso l'istruzione non venga riconosciuta o per chi lavora su Linux, è
necessario provvedere prima all'installazione di Ruby e ruby-gem.
 Ultima versione

8. COME SI COMPILA
 Dopo aver creato un file layout.less
 Nella stessa cartella del file .less troverete il file .css
 Modalità interattiva
(ogni volta che si modificherà il file .less verrà rigenerato il file .css)
ATTENZIONE
Se si genera un errore verrà
bloccata la modalità interattiva
e si dovrà riavviare!

9. CODING CON LESS #1
 VARIABILI
=>
LESS CSS

10. CODING CON LESS #2
 MIXINS
permettono di definire una serie di proprietà che possono essere richiamate
all'interno delle dichiarazioni degli stili.
=>
LESS CSS

11. CODING CON LESS #3
 DICHIARAZIONI NIDIFICATE
Less permette di velocizzare la scrittura di lunghe sequenze di selettori
nidificando e raggruppando i percorsi attraverso l'uso delle parentesi:
=>
LESS
CSS

12. CODING CON LESS #4
 OPERAZIONI
Il compilatore è in grado di riconoscere il tipo di valore che si sta
manipolando e quindi applicare la corretta unità di misura.
=>
LESS
CSS

13. CODING CON LESS #5
 NAMESPACE e ACCESORS
È possibile raggruppare una serie di mixins o variabili all'interno di una
singola dichiarazione
=>
LESS
CSS

14. CODING CON LESS #6
 SCOPE
Quando richiamiamo una variabile, il compilatore ricerca il suo valore prima
a livello locale e, nel caso non fosse disponibile, a ritroso percorrendo i vari
nodi padre.
 IMPORT
Less permette di importare sia altri file .less che normali file .css tramite
l'istruzione @import. Per i file .less non è necessario specificare
l'estensione.

15. Contatti
Saverio M.
@savez