Scrivere i CSS con Less

24 novembre 2009

Come installare Less

Less si installa molto facilmente grazie ad una piccola gemma di Ruby. Se questi due termini vi suonano strani, vi consiglio di dare una veloce lettura alle guide di HTML.it dedicate a Ruby e Rails. Sappiate comunque che non è assolutamente necessario padroneggiare questi due linguaggi per utilizzare Less.

Se la vostra piattaforma di sviluppo si basa su una versione recente di Mac OS X, per installare Less è sufficente digitare:

sudo gem install less

Nel caso l’istruzione non venga riconosciuta o per chi lavora su Windows o Linux, è necessario provvedere prima all’installazione di Ruby e ruby-gem. Per le istruzioni dettagliate su come procedere potete fare ancora un volta riferimento alle guide presenti qui su HTML.it.

Personalmente vi consiglio di installare l’ultima versione in sviluppo così da aver accesso alle ultime funzionalità introdotte.

L’installazione in questo caso può essere eseguita in questo modo:

sudo gem install less -s http://gemcutter.org

Ora, posto che abbiate creato un file layout.less, per generare il vostro file .css è sufficiente digitare il comando:

lessc layout.less

Troverete ora un file layout.css nella medesima cartella in cui si trova layout.less.

Come accennato in precedenza, esiste la possibilità di lanciare il compilatore in modalità interattiva in questo modo:

lessc -w layout.less

e al terminal (o prompt dei comandi) apparirà un messaggio simile al seguente:

* Watching for changes in layout.less... Ctrl-C to abort.
: Change detected... * [Updated] layout.css
:

Da questo momento in poi Less si occuperà di generare un nuovo file .css aggiornato ogni qual volta verrà rilevato un cambiamento nel file .less.

Nota bene: ogni volta che il compilatore rileva un errore nel codice sorgente, arresta automaticamente la modalità interattiva. È quindi necessario ricordarsi di ritornare al prompt dove è in esecuzione e riattivarla.

Il linguaggio

Possiamo ora passare ad analizzare in dettaglio le funzionalità messe a disposizione da Less.

Variabili

Tramite l’utilizzo di variabili è possibile dichiarare il valore di una proprietà per poi utilizzarla più volte all’interno del nostro file:

@colore-testo: #333333;

p {
  color: @colore-testo;
}
a {
  color: @colore-testo;
  text-decoration: underline;
}

Verrà quindi generato il seguente CSS, ma in fase di scrittura avremo sfruttato tutte le potenzialità offerte dalle variabili! Pensate il concetto applicato a fogli di stile lunghi e complessi:

p {
  color: #333333;
}
a {
  color: #333333;
  text-decoration: underline;
}
Se vuoi aggiornamenti su Scrivere i CSS con Less inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su Scrivere i CSS con Less

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy