Introduzione a Less

Se state leggendo questa introduzione, probabilmente conoscerete già CSS e la facilità d’apprendimento con cui questo linguaggio si presenta. Con le nuove caratteristiche introdotte da CSS3, sono state aggiunte molte altre nuove possibilità per rendere le nostre pagine web più splendide che mai. In questo articolo in particolare cercheremo di coprire le basi di LESS, perchè? perchè sfortunatamente anche CSS ha le sue debolezze, in primis la staticità. Questo vuol dire ripetere il codice nei nostri stili più e più volte. E LESS ci viene in soccorso.

Citando lesscss.org, LESS è un linguaggio di styling dinamico. Ciò che rende LESS dinamico è proprio l’estensione di CSS con variabili, mixins, operazioni e funzioni, forzando il CSS a comportarsi come un vero linguaggio di programmazione. Una caratteristica chiave è che preserva la sintassi originale CSS.

Tecnicamente parlando, LESS è un preprocessore di CSS. In termini semplici, è un metodo per estendere l’insieme di caratteristiche di CSS scrivendo gli stili in un nuovo linguaggio potenziato, che viene dopo compilanto in puro CSS in modo che venga correttamente interpretato dai Browser. LESS è solo uno dei 3 più famosi preprocessori di CSS, gli altri due sono SASS e Stylus.

Ho scelto di parlare di LESS perchè è stato pensato per rimanere quanto più possibile a CSS, quindi la sintassi è praticamente identica al CSS corrente. Tutto ciò che c’è da imparare è un nuovo modo di usare lo stesso linguaggio.

LESS può essere eseguito sul client o lato server (con Node.js). Per questo tutorial, useremo LESS lato client in quanto più semplice per iniziare. Dunque che aspettiamo, iniziamo!

Iniziare con LESS

Usando il compilatore JavaScript è estremamente facile. Semplicemente includete lo script nel vostro codice HTML, e processerà tutto il codice LESS quando la pagina sarà caricata. In questo modo possiamo includere il nostro file LESS come se fosse un file di stile standard. Questo è il codice da inserire fra i vostri tag :

<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>
<script type="text/javascript">
  less.watch();
</script>

Il link di stile va sopra lo script javascript. Notare che il tipico rel="stylesheet" diviene rel="stylesheet/less". Inoltre, assicuratevi che il valore in href punti al vostro file .less.

Se preferite, potete referenziare lo script less.js direttamente dai server di Google Code. Con questo metodo, non dovete neanche scaricarlo lo script per usarlo.

<script src="http://lesscss.googlecode.com/files/less-1.2.2.min.js"></script>

Come potete vedere, lo style dichiarato possiede un attributo rel impostato su stylesheet/less e abbiamo creato un file chiamato styles.less.
Tutti i nostri codici in LESS e CSS andranno inseriti in quel file. Abbiamo anche dichiarato il file Javascript che compilerà il codice LESS (less.js) in codice CSS. Questo file Javascript effettuerà delle chiamate asincrone (AJAX) per leggere i file LESS, quindi è necessario l’utilizzo di un web server.
Se non ne avete uno, scaricate semplicemente XAMPP/WAMP (Windows), MAMP (Max), o LAMP (Linux), a seconda del vostro sistema operativo e siete pronti per lavorare.

Il comando successivo less.watch() attiva la modalità ‘watch’ in LESS, che è una caratteristica lato client disponibile in modalità di sviluppo. Questo ricaricherà il CSS sulla vostra pagina quando il file .less verrà modificato e mostrerà i nuovi cambiamenti. Il punto forte di questa soluzione è che non ricarica l’intera pagina ma solo le parti giuste del CSS. E’ opzionale, ma è una caratteristica troppo utile per non usarla, soprattutto in fase di sviluppo.

Se aprite il file style.less nel vostro editor preferito, noterete che durante la modifica di un file .less, non avrete una sintassi evidenziata, di default. Questo perchè è un formato ancora poco diffuso, vi basterà dalle preferenze dell’editor associare all’estensione .less l’highlight del CSS. Questo perchè la loro sintassi è molto simile. Nonostante le piccole differenze che hanno dovrebbe funzionare bene.

Importazione

E’ possibile importare file .less, e tutte le variabili e i mixins all’interno verranno resi disponibili al file principale. L’estensione .less è opzionale:

@import "typography.less";
@import "typography";

Se volete importare un file CSS e non volete che LESS lo processi, vi basta usare l’estensione .css:

@import "typography.css";

Prima che ignoriate questo passo, voglio meglio precisare quanto l’import possa essere potente. Alla fine della fase di sviluppo, tutti i file .less verranno compilati e minimizzati in un unico file .css puro, pronto per la fase di produzione. Quindi, non dovete preoccuparvi di quante richieste al server le vostre pagine faranno, e se questo rallenterà il caricamento della pagina. Penso siate d’accordo nel dire che mantenere un unico lungo file .css sia più difficile che mantenerne tanti piccoli e separati. Motivo per cui è un’ottima idea suddividere il vostro file principale in tanti piccoli file specifici per colori, tipografia, griglie, reset etc. Questo vi aiuterà a strutturare il vostro codice in maniera modulare.

Commenti

I commenti si sa, rendono il vostro codice molto più leggibile. Potete aggiungere dei commenti ai vostri file .less così come fareste per un normale file CSS, tenendo in mente alcune cose.

I commenti multilinea in LESS vengono preservati e inseriti nel file CSS compilato:

/* Ciao! Questo verra' mostrato nel file compilato */
.class {color: white}

I commenti su linea singola invece non verranno presentati:

// Come va amico? non preoccuparti questo non viene mostrato nel file css compilato
.class {color: white}

Variabili o Costanti?

LESS da la possibilità di usare variabili proprio come fareste in qualsiasi altro linguaggio di programmazione. Questo rende estremamente facile impostare degli stili globali che possano essere cambiati in un’unica singola locazione, piuttosto che ricercare e sostituire ogni istanza di quello stile lungo tutto il File.

Le variabili si dichiarano con il simbolo @. Gli date un nome e un valore, e poi è possibile referenziarle ovunque nel vostro file .less:

@name: value;              // sintassi
@color: red;               // esempio
background-color: @color;  // utilizzo
background-color: red;     // output

LESS permette di definire delle variabili anche “annidate”, in questo modo:

@mainColor: red;
@bgColor: 'mainColor';
background-color: @@bgColor; // background-color: red;

Prima di muoversi verso esempi più complessi, dovete capire che in realtà le “variabili” in LESS sono di fatti delle costanti! che vuol dire? vuol dire che possono essere definite una sola volta! e il loro valore non può essere cambiato una volta impostato.

Ora, non pensate che sia più naturale definire un colore con il proprio nome reale piuttosto che usare valori esadecimali o RGB? e si, lo penso anche io! Fortunatamente questo può essere fatto facilmente con LESS, usando le variabili appena viste, ecco come:

//Definiamo la tavolozza dei colori
@dimGray: #696969;
@gold: #FFD700;
@greenYellow: #ADFF2F;
@deepSkyBlue: #00BFFF;
 
 
//Definiamo lo schema dei colori
@backgroundColor: @dimGray;
@primaryColor: @gold;
@secondaryColor: @deepSkyBlue;
 
 
//Ora potete usarli in questo modo:
section {
   background-color: @backgroundColor;
   color: @primaryColor;
}
 
 
section ul li {
   color: @secondaryColor;
}

Ogniqualvolta vogliamo usare questi colori nei nostri stili, ci è sufficiente richiamare la variabile definita invece del codice del colore. Se volete approfondire la cosa, potete creare un file separato con le variabili dei colori (colors.less) e importarlo nel vostro file .less principale. In questo modo, non avrete bisogno di definire nuovamente i colori per ogni vostro nuovo progetto. Semplicemente importate e usate quello che già avete realizzato.

Le dichiarazioni di variabile non appariranno nell’output (file css compilato). Esse possono contenere qualsiasi valore, e possono apparire ovunque possa apparire una normale proprietà CSS.
Lo scope delle variabili in LESS è molto simile a quello dei linguaggi di programmazione più conosciuti. Potete usare variabili con lo stesso nome in vari posti. Variabili e mixins vengono prima ricercati localmente, e se non vengono trovati, il compilatore salirà di una gerarchia finchè non verranno trovati:

@color: red;
header {
  @color: white;
  color: @color; // bianco
}
footer  {
  color: @color; // rosso
}

Avrete notato come in tutti gli esempi sopra, venga utilizzata una notazione Ungherese per le variabili – caratteri piccoli per la prima parola, maiuscola la prima lettera delle restanti parole.
E’ soltanto una preferenza stilistica che meglio aiuta a differenziare il codice LESS dal codice CSS. Potreste normalmente usare la convenzione di scrittura che più vi aggrada.

La prossima volta…

Restate sintonizzati per la seconda parte di questo articolo, verranno introdotte le caratteristiche avanzate di LESS – Mixins e molto altro!