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