Introduzione a LessCSS

Il logo di Sinatra

Negli ultimi anni lo sviluppo web ha rivestito sempre maggiore importanza, inizialmente era limitato allo sviluppo di piccoli siti di presentazione, ristoranti, alberghi, siti personali, etc, i quali non raggiungevano livelli esagerati di complessità e infatti lo sviluppo era abbastanza semplice e lineare.

Col passare del tempo e con il costante raffinamento di ciò che veniva messo online gli sviluppatori hanno iniziato a sviluppare progetti complessi che richiedono un approccio più ragionato allo sviluppo (pensate allo sviluppo di Facebook).

Pensiamo ad un esempio banale, quando si progetta un sito web tra le varie cose da scegliere c’è una palette di colori, i quali devono restare costanti in tutte le pagine. Fino ad oggi era compito dello sviluppatore segnarsi i codici esadecimali da inserire nel file CSS. Grazie a LessCSS questo sarà solo un ricordo!


Cosa è?

LessCSS è una gem Ruby che fornisce allo sviluppatore una serie di funzionalità molto comode tutte focalizzate sulla scrittura dei file CSS. Con delle piccole modifiche allo stile in cui siete abituati a scrivere i vostri file CSS vi troverete a scrivere meno codice e ad organizzarlo in maniera migliore.

Installazione

Come tutte le gem Ruby l’installazione è molto semplice, è sufficiente andare in console ed eseguire il comando:

$ gem install less

(con sudo se utilizzate OSX)

Una volta installata la gem l’utilizzo è semplice, quando avrete finito di scrivete il vostro file CSS (che dovrà avere l’estensione .less) basterà eseguire da console:

$ lessc 

e la gem provvederà a generare il file .css corrispondente.

E’ ovvio che “l’habitat naturale” per LessCSS è all’interno dello sviluppo di applicazioni Ruby on Rails e infatti per questo framework è disponibile un plugin che si preoccupa della generazione dei file css in automatico (di fatto evitandovi di dover invocare il comando ogni volta che modificate i file .less).

L’installazione del plugin avviene con il solito comando script/plugin install:

$ script/plugin install git://github.com/cloudhead/more.git

(ovviamente richiede che la gem di LessCSS sia installata)

Funzionalità

Adesso vediamo cosa LessCSS può fare per aiutarci nella scrittura dei nostri file CSS!

Una delle cose che personalmente trovo più utili di LessCSS sono le variabili, infatti nel nostro file .less è possibile definire delle variabili a piacimento che poi potremo utilizzare nel resto del file.

Supponiamo che nella palette del nostro sito ci siano 5 colori, questi 5 valori esadecimali si ripeteranno in continuazione in tutto il file CSS. Ogni volta che ci serve un colore dovremo andarlo a prendere dal codice già scritto o da un elenco che ci terremo da qualche parte. Con LessCSS questo è solo un ricordo, nel nostro caso basterà creare 5 variabili (una per colore) e da quel momento quando avremo bisogno di un certo colore basterà richiamare il nome della variabile. Vediamo un esempio:

@my_red: #FF0000;
@my_green: #00FF00;
p#error {
border: 1px solid @my_red;
color: @my_red;
}
p#success {
border: 1px solid @my_green;
color: @my_green;
}

L’esempio è abbastanza banale ma se immaginate il caso in cui dovete sostituire uno dei colori capirete che la comodità è molta, basterà infatti cambiare il valore della variabile @my_red e ovunque nel mio sito verrà utilizzato il nuovo colore. Non userete più “Find and Replace”!

Un’altra cosa comoda di LessCSS sono i Mixins. In sostanza vi permette di creare dei gruppi di attributi CSS (sotto forma di classi CSS) e di utilizzarli all’interno di altre classi/id.

Vediamo un esempio:

.rounded_corners (@radius: 5px) {
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}

#header {
.rounded_corners;
}

#footer {
.rounded_corners(10px);
}

In questo esempio sia #header che #footer ottengono gli attributi presenti in .rounded_corners. In questo modo potremo scrivere meno codice perchè ci viene permesso di astrarlo!

Può capitare che sia necessario scrivere dei selettori abbastanza lunghi per assegnare un certo attributo CSS a chi di dovere. Per evitare di dover scrivere molto codice (che di fatto a noi non porta nulla), LessCSS ci permette di descrivere la gerarchia dei selettori direttamente dal modo in cui scriviamo il nostro file .less.

Detto a parole sembra complesso, con un esempio tutto sarà chiaro, prendiamo ad esempio questo CSS:

#page { background-color: '#FF0000'; }
#page h1 { font-size: 4em; }
#page a { color: '#FF0000'; }
#page .box { border: 1px solid '#FF0000'; }
#page .box h2 { font-size: 2em; }

Invece di esplicitare la gerarchia “#page .box h2” possiamo lasciare che sia LessCSS a dedurla!

Quello che segue è il codice che genera il codice che vi ho mostrato poco sopra:

@custom_red: '#FF0000';

#page {
background-color: @custom_red;
h1 {
font-size: 4em;
}
a {
color: @custom_red;
}
.box {
border: 1px solid @custom_red;
h2 {
font-size: 2em;
}
}
}

Come vedete la gerarchia viene ‘letta’ da LessCSS permettendoci di concentrarci su altro e allo stesso tempo rendendo più leggibile il nostro file.

Un’altra comoda funzione che ci viene fornita è la possibilità di far calcolare a LessCSS determinati valori all’interno del nostro CSS. Ad esempio:

@column: 100px;
@column-margin: 10px;
@extra-side-margin: 5px;

#page {
background-color: @background_for_custom_red_border;
#first-column {
width: @column;
margin-left: @column-margin + @extra-side-margin;
}
#second-column {
width: @column;
margin: 0 @column-margin;
}
#third-column {
width: @column;
margin-right: @column-margin + @extra-side-margin;
}
}

In questo esempio LessCSS si preoccuperà di calcolare tutti i valori di width (dove semplicemente sostituirà il valore 100px) e quelli di margine (che calcolerà eseguendo le addizioni). In questo modo non si dovrà più commentare nel CSS per ricordarsi il perchè di un certo valore! Ovviamente non si limita alle sole addizioni 🙂

L’ultima funzione che andremo ad osservare è la possibiltà di importare altri file .less (o .css) all’interno del nostro file .less.
Questo può essere molto utile per fare in modo che l’output sia un unico file .css. Per farlo basta inserire all’interno del nostro file .less:

@import 'reset.css'

Nell’esempio stiamo dicendo a LessCSS di importare il file .css all’interno del nostro file (ovviamente è possibile fare l’import anche di un altro file .less)

Conclusione

Per concludere credo che LessCSS sia un ottimo strumento per facilitare un po’ la vita a chi scrive parecchio codice CSS. Di sicuro ha come contro che va imparato (ma credo che questo valga per qualunque novità tecnica) e che introduce un passo ulteriore (la generazione del file css), ma grazie al plugin per Ruby on Rails credo che i contro siano davvero minori se paragonati ai vantaggi che può portare.

Al momento non è disponibile la compressione del file .css risultante, ma nel codice sorgente della gem è già tutto predisposto quindi a breve LessCSS dovrebbe guadagnare questa comoda (e ormai necessaria) funzionalità.

Comments

  1. siccome mi ci era voluto un po’ a trovarlo, segnalo il modulo perl di less http://search.cpan.org/~drinchev/CSS-LESSp-0.03/lib/CSS/LESSp.pm per chi non volesse usare ruby

    saluti

  2. Ottimo articolo! Nessuna sbrodolata e c’è praticamente tutto, meglio di una reference card.

    Quanto è bello essere lettori di stacktrace…

  3. A chi come me usa Django, segnalo questa applicazione che, tra le altre cose, include anche il supporto per LESS.

    http://code.google.com/p/django-css/

  4. salve
    volevo segnalarvi questo programmino:
    http://easyblog.it/lesscss/
    che ho messo online, utilizzando la classe lessphp (http://leafo.net/lessphp)

    grazie per questo articolo che mi è stato molto utile

Policy per i commenti: Apprezzo moltissimo i vostri commenti, critiche incluse. Per evitare spam e troll, e far rimanere il discorso civile, i commenti sono moderati e prontamente approvati poco dopo il loro invio.


Speak Your Mind

*

Time limit is exhausted. Please reload CAPTCHA.