LESS & CSS: Come velocizzare i tempi di sviluppo?

Il pregio dei fogli di stile di essere semplici può diventare un difetto nel momento in cui vogliamo farne un utilizzo più professionale ed evoluto. Scopriamo insieme Less, uno strumento che ci permette di ovviare a questo problema.

Cos’è LESS?

Less è un foglio di stile dinamico che estende la sintassi standard dei CSS rendendo possibile l’utilizzo di variabili, mixins, operazioni e funzioni.

Less e le altre estensioni a lui simili si compongono di due parti: il linguaggio e il compilatore, quest’ultimo, sviluppato in javascript, traduce il foglio di stile dinamico in semplice CSS in modo che sia interpretabile da tutti i browser.

Come installare Less?

Utilizzare Less è molto semplice, per prima cosa devi inserire il foglio di stile dinamico e il compilatore all’interno del tag <head> nella pagina web che stai sviluppando:




<script type="text/javascript" src="less.js"></script>


 …


ATTENZIONE! Il foglio di stile dev’essere inserito prima dello script.

Come puoi vedere, l’attributo rel assume il valore stylesheet/less e poco dopo viene aggiunto il file javascript (scaricabile a questo indirizzo: https://lesscss.org/) che compila, lato client, il file .less.
Ricorda, è meglio far uso di questo metodo solo durante la fase di sviluppo del sito, dopo la pubblicazione, invece, per migliorare le prestazioni, è buona norma utilizzare un foglio di stile compilato e, magari, minificato.

Per compilare un file scritto in Less puoi adoperare less.app su Mac OSX oppure SimpLess su Windows.

Come utilizzare le variabili?

Una variabile permette di specificare un valore che verrà riutilizzato nei selettori all’interno del foglio di stile. Le variabili in Less possono essere dichiarate con il simbolo @ seguito dal nome e dal valore della variabile, vediamo un esempio:

@color: #F0F0F0;

#header{
    color: @color;
}

Non male! Ora proviamo con un esempio molto più utile, immagina di lavorare ad un sito composto essenzialmente da tre colori:

@orange: #FB8B31;
@aqua: #7ECCBA;
@pink: #FECEA8;

@firstColor: @aqua;
@secondColor: @orange;
@thirdColor: @pink;

body{
    background: @thirdColor;
    color: @primaryColor;
}

a:link{
    color: @secondColor;
}

Se il tuo cliente cambia idea sui colori puoi cambiarli in pochissimi passaggi senza dover controllare tutto il foglio di stile.

Mixins: come funzionano?

Con l’avvento del CSS3 per supportare tutti i browser siamo costretti ad utilizzare prefissi come –webkit- o –moz-, quindi se volessi un div con i bordi arrotondati dovrei scrivere il seguente codice:

#shape1{
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

Less ci viene in aiuto con i mixins che permettono di specificare le proprietà di cui abbiamo bisogno all’interno di una classe, l’esempio ti renderà tutto più chiaro:

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

#shape1{
    .rouded-corners;
}

#shaper2{
    .rounded-corners(10px);
}

Ogni volta che chiamiamo .rounded-corners verranno stampati i valori all’interno della classe specificata con il valore passato come parametro oppure il valore di default.

Regole nidificate, che comodità!

Less consente di scrivere regole nidificate in modo da avere un CSS più organizzato. Vediamo un esempio con un menu di navigazione, se non usassi Less dovrei scrivere quanto segue:

ul#nav{
    list-style: none;
}

ul#nav li{
    display: inline;
    margin: 0;
    padding: 0;
}

ul#nav li a{
    color: #aaa;
    font-size: 1em;
}

ul#nav li a:hover{
    color: #000;
}

Ora proviamo usando Less:

ul#nav{
    list-style: none;
    li{
        display: inline;
        margin: 0;
        padding: 0;
        a{
            color: #AAA;
            font-size: 1em;
            &:hover{ color: #000; }
        }
    }
}

Il compilatore Less farà il resto e tradurrà quanto abbiamo scritto nel codice di prima.

Come utilizzare funzioni e operatori?

Less consente anche di usare operatori e funzioni per manipolare valori numerici, colori e variabili:


@default-h1-size: 5em;
@default-color:  #555;

h1{ font-size: @default-h1-size;  }
h2{ font-size: @default-h1-size * .8;  }
h3{ font-size: @default-h1-size * .6;  }
h4{ font-size: @default-h1-size * .4;  }
h5{ font-size: @default-h1-size * .2;  }

#header{
    background: lighten(@default-color, 40%);
    color: darken(@default-color: 60%);
}

Abbiamo quindi visto come Less può rendere molto più facile il tuo lavoro, ovviamente questa è solo una piccola anticipazione delle potenzialità di questo strumento.

Nel sito ufficiale puoi trovare una documentazione dettagliata e molti esempi che ti permetteranno di entrare nella filosofia alla base del progetto, dopo ovviamente l’unico limite sarà la tua immaginazione ed io sono proprio curioso di vedere dove ti porterà!

Tag: ,

L'autore

24 anni, full stack developer e designer. Diversi anni fa si è appassionato al mondo delle startup e da allora non lo ha più lasciato. Questa passione lo ha portato a girare il mondo, arrivando a lavorare nel cuore della Silicon Valley. Da un anno ha fondato ammesso.it, una piattaforma di e-learning per la preparazione ai test di ammissione all'università.

Sito web dell'autore | Altri articoli scritti da

Articoli correlati

Potresti essere interessato anche ai seguenti articoli:

20 commenti

Trackback e pingback

Non ci sono trackback e pingback disponibili per questo articolo