Cos’è Less e come utilizzarlo

Logo LessLess è un pre-processore CSS che consente di scrivere file CSS più velocemente aggiungendo nuove caratteristiche come l’uso delle variabili, dei mixin, delle funzioni e di tante altre funzionalità. Utilizzare Less per la scrittura dei file CSS consente di avere file più mantenibili ed estendibili. Un file Less non viene interpretato dal browser ma vengono convertiti per generare dei file CSS da dare in pasto al browser. Esistono molti preprocessori CSS, ma Less, insieme a Sass, è tra quelli più utilizzato al mondo. Per un confronto tra i due preprocessori: Differenza tra Sass e Less. Tra i framework più popolari che utilizzano Less troviamo Boostrap 3, per lo sviluppo di siti responsive.

Less viene eseguito in Node.js ma può essere utilizzato anche tramite strumenti di terzi parti come less2css.org, un tool online per convertire file Less in file CSS. Una lista di compilatori Less online è disponibile a questo indirizzo.

Per installare Less sul server possiamo utilizzare NPM, il package manager di Node.js, scrivendo da linea di comando:

  npm install -g less

Per compilare file less biosgnerà scrivere:

  lessc nome-file-less.less

In questo modo sarà generato nel file stdout con le regole Less convertite e compatibili con gli standard CSS. Per specificare il nome del file CSS generato basterà scrivere:

  lessc nome-file-less.less nome-file-css.css

La conversione dei file Less può avvenire sia lato client (dal browser) che lato server, quest’ultima opzione è quella consigliata in quanto non esistono vantaggi nel delegare il browser di questo compito, anzi, in questo modo non si aumenta ogni volta il tempo di caricamento di una pagina con la generazione dei file CSS ad ogni richiesta.

Lato client Less può essere utilizzato importando il file less.js o facendo riferimento ad un CDN:

    <script src="less.js" type="text/javascript"></script> <!-- Tramite file scaricato -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.6.1/less.min.js"></script> <!-- Tramite CDN -->

Infine, basterà inserire i file .less da noi creati all’interno della pagina:

    

Esempio file Less

Less può essere installato tramite Bower in questo modo:

  bower install less

La sinstassi di Less: variabili, mixin, annidare le classi e i colori

Diamo un’occhiata alle funzionalità messe a disposizione da Less. Tutte le porzioni di codice possono essere testate tramite un qualsiasi tool online (ad esempio lesscss.org).

Una delle grandi differenze rispetto ad un file CSS è la possibilità di utilizzare delle variabili all’interno dei file CSS. Ad esempio, invece di dover scrivere il codice esadecimale di ogni singolo colore, possiamo salvare il codice esadecimale in una variabile ed utilizzare il riferimento alla variabile per applicare il colore:

    @rosso: #FF0000;
    p {
        color : @rosso;
    }
    #mia-classe {
        color : @rosso;
    }

Il file CSS generato sarà:

    p {
        color: #FF0000;
    }
    #mia-classe {
        color: #FF0000;
    }

Utilizzare le variabili in un file CSS ci consente di mantenere più facilmente il file nel tempo: nell’esempio precedente, se volessimo cambiare il colore utilizzato ci basterà modificare solo il valore della variabile e non più ogni singolo punto in cui è utilizzato.

Un’altra grande novità che Less introduce è l’utilizzo dei mixin che consentono di raggruppare delle regole CSS e poi utilizzarle all’interno di altre classi. Ad esempio definendo la classe .font-titolo in questo modo:

    .font-titolo {
        font-family: ”Times New Roman”, Times, serif;
        font-size: 14px;
        font-weight: bold;
    }

Possiamo applicare facilmente le regole di font-titolo a qualsiasi altra classe in questo modo:

    #titolo-menu {
        .font-titolo;
        color: #FF3333;
    }

Il codice CSS risultate sarà:

    .font-titolo {
        font-family: ”Times New Roman”, Times, serif;
        font-size: 14px;
        font-weight: bold;
    }
    #titolo-menu {
        font-family: ”Times New Roman”, Times, serif;
        font-size: 14px;
        font-weight: bold;
        color: #FF3333;
    }

Un’altra possibilità che Less introduce è quella di annidare le classi. Ad esempio, scrivendo:

    header {
        color: #FF0000;
        .titolo {
            font-size: 14px
        }
        .login {
            font-size: 11px;
            &:hover {
                text-decoration: none
            }
        }
    }

Nel frammento di codice precedente stiamo dichiarando che:

  1. La classe .titolo applica il font-size solo agli elementi figli di header;
  2. La classe .login applica il font-size solo agli elementi figli di header;
  3. Gli elementi figli di header, al passaggio del mouse sull’elemento con classe .login non deve mostrare nessuna decorazione del testo.

Il file CSS generato dal file Less sarà:

    header {
        color: #FF0000;
    }
    header .titolo {
        font-size: 14px;
    }
    header .login {
        font-size: 11px;
    }
    header .login:hover {
        text-decoration: none;
    }

Less offre inoltre un gran numero di funzioni per gestire i colori, tra cui: lighten, darken, saturate, desaturate, fadein, fadeout e spin che consente di cambiare la gradazione della sfumatura del colore. In un file Less è possibile importare altri file Less/CSS tramite la direttiva @import in questo modo:

    @import "my-lib.less";
    @import "my-lib"; // Equivalente al precedente
    @import "my-lib.css";

Importare i file dal punto di vista della manutenzione di un progetto è una grande funzionalità: è possibile separare il progetto in più file più facilmente gestibili, ad esempio creando un unico file con tutte le variabili utilizzate e importarlo dove necessario.

Less può essere utilizzato insieme ad un gran numero di plugin:

  1. CSScomb: per formattare e migliorare i file CSS;
  2. clean-css: per comprimere e minimizzare i file;
  3. lesshint: per verificare la correttezza del codice;
  4. npm-import: per importare i pacchetti di NPM.

E’ possibile trovare una lista dei plugin per Less a questo indirizzo: . Sono molte anche le librerie di mixin messe a disposizione, tra cui CssEffects (collezione di effetti CSS), LESS Elements e LESS Hat (ad esempio: Mixin libraries).

Pubblicato in CSS, Front-end, JavaScript, Programmazione Taggato con: , , , , , , ,

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

*