Chi non ha mai avuto a che fare con i CSS? un linguaggio semplice utile per istruire un browser su come il documento debba essere presentato all’utente, per esempio definendone i font, i colori, le immagini di sfondo, il layout…

Dal 1996, anno della nascita dei CSS, ad oggi, però, sono venuti a galla tutti i limiti dei CSS e, per colmarli, è nato LESS: un linguaggio di programmazione per la compilazione dei fogli di stile CSS.

Less è un preprocessore, cioè si tratta di scrivere i CSS in un nuovo linguaggio che verrà poi compilato in un file CSS in grado di essere letto dai browser.Questo nuovo linguaggio permette di trasformare la semplice sintassi del CSS in un linguaggio di programmazione, offrendo agli sviluppatori e ai web designer strumenti avanzati come funzioni, variabili ed operazioni.

Ma vediamo come si usa LESS.

Usare Less non richiede particolari conoscenze tecniche e, dopo qualche minuto dedicato allo studio delle sue funzionalità, può realmente far risparmiare parecchio tempo durante la stesura dei fogli di stile.

Ci sono 2 modi per utilizzare LESS:

  • includendo il file LESS al posto del CSS seguito da un piccolo file javascript che si occuperà della compilazione

              <link rel=”stylesheet/less” type=”text/css” href=”style.less”>
              <script src=”less.js” type=”text/javascript”></script>

  • includendo il file LESS al post del CSS ma lasciando la compilazione ad un software installato sul proprio pc (WinLess per gli utenti windows e CodeKit o SimpLESS per utenti Mac).

L’installazione di LESS è molto semplice, ora vediamo le sue potenzialità:

Variabili

LESS permette di creare variabili da poter riutilizzare.

Se ad esempio la grandezza del carattere del nostro sito web è di 12 pixels e non vogliamo ripeterla ogni volta possiamo dichiarare una variabile e richiamarla quando vogliamo:

@fontsize : 12px;
section p {font-size: @fontsize;}

Operazioni

è possibile effettuare operazioni aritmetiche tra valori e variabili

@base:200px;
#main{width:300px + @base;}

Stili annidati

section {
      color: red;
      p {
              font-size: @fontsize;
       }
       .intro {
                 color: #333;
        }
}

Le classi miste e le classi parametrizzate (MIXIN)

Immaginate di dare degli stili ad una classe come avete sempre fatto fino ad ora:

.rounded { border-radius: 10px; }

Con LESS sarà possibile fare anche questo:

section { .rounded; }

E non solo:

.rounded (@radius) {
     border-radius: @radius;
}

In questo modo abbiamo una funzione parametrizzata che possiamo usare quando e dove vogliamo impostando un valore di smussatura diverso volta per volta:

section { .rounded(15px); }

Commenti

Possiamo inserire i commenti per una singola riga con il doppio slash (//), come in Javascript.

Scope

l concetto di scope è invece più legato alla “validità” delle variabili nei blocchi di codice, un po’ come succede nei linguaggi di programmazione tradizionali. Vediamo un esempio:

@var: red;

#page { @var: white; #header { color: @var; // white } }

#footer { color: @var; // red }

Import

é possibile importare all’interno di un file less altri file css/less

@import “definition.less”

Il risultato di questa operazione sarà, una volta compilato il file, un unico file in cui tutto viene incluso.

Questi sono tutti i vantaggi che offre LESS; trasformare i CSS in un linguaggio di programmazione semplifica e velocizza la stesura dei fogli di stile.