Cos’è e come funziona LESS

less
Tempo stimato di lettura: 3 minuti, 30 secondi
Pubblicato il 13 agosto 2012

Che siate web designer o web developer sicuramente avete a che fare tutti i giorni con CSS, un linguaggio molto semplice, costituito da regole e blocchi di dichiarazioni che non necessita di essere compilato per poter funzionare.

Le sue limitazioni e mancanze avranno fatto storcere il naso più volte agli sviluppatori più navigati ma dopotutto è comprensibile: non si tratta di un linguaggio di programmazione bensì di un linguaggio di formattazione e quindi la semplicità deve essere al centro di tutto.

C’è un modo però per estendere le potenzialità di CSS somministrandogli una carica di steroidi chiamati “LESS”.

LESS in gergo è un preprocessore: in parole povere si tratta di scrivere i CSS in un nuovo e potenziato linguaggio (LESS appunto) che verrà compilato in un file CSS in grado di essere letto dai browser web.

I maggiori preprocessori sul web sono LESS e SASS ma preferisco il primo per la semplicità d’uso e la facilità di apprendimento, oltre al fatto che mantiene la sintassi di CSS praticamente inalterata.

Come si usa Less

LESS può essere utilizzato in 2 modi:

1. includendo il file LESS al posto del CSS seguito da un piccolo file JS che si prenderà carico della compilazione:

2. Oppure, il metodo migliore a mio parere, includendo il file LESS al posto del CSS ma lasciando la compilazione ad un piccolo software che una volta installato sul vostro PC o Mac si occuperà di tutti i vostri progetti LESS.

Per chi usa un sistema Mac i migliori software a disposizione sono CodeKit e SimpLESS mentre per gli utenti Windows c’è l’ottimo WinLESS.

Includete il file LESS, scrivete il vostro CSS e ad ogni salvataggio il software farà partire una compilazione che automaticamente creerà un file CSS (volendo anche compresso!) nella cartella che preferite. Tutto qui. Semplice vero? Adesso che avete incluso LESS nel vostro progetto siamo pronti a sfruttarne tutte le potenzialità.

Diamo un pò di steroidi al CSS

Mi piace pensare a CSS come una specie di Super Sayan che, al bisogno, carica la propria aura fino a diventare su Super Sayan di 2° livello grazie a LESS.

Effettivamente la sensazione è questa: tutto ciò che abbiamo sempre desiderato poter fare con CSS, grazie a LESS, è ora possibile e in particolare l’utilizzo di:

  • stili annidati
  • variabili
  • funzioni ed operazioni
  • classi miste
  • classi parametrizzate

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

In questo modo se volessimo cambiare la grandezza del carattere per tutti gli elementi basterà farlo una sola volta nella dichiarazione della variabile @fontsize.

Un’altra caratteristica interessante sono gli stili annidati:

Il CSS compilato sarà simile a questo:

Bello vero? E questo è niente: adesso il Super Sayan di 2° livello sta per trasformarsi in un Super Sayan di 3° livello.

Le classi miste e le classi parametrizzate

Goku Super Sayan 3

Non sarà biondo e con i capelli lunghi ma LESS è veramente un portento e le classi miste e parametrizzate ne sono la dimostrazione.

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

Niente di nuovo ma la cosa strepitosa è che con LESS sarà possibile fare anche questo:

E non è finita qui perchè possiamo fare di meglio:

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

FU-SIO-NEEEEEE!

A questo punto il Super Sayan di 3° livello potrebbe diventare tranquillamente di 4° livello e, perchè no, fare anche la fusione per diventare più potente.
Con questo articolo tuttavia non voglio scendere troppo in tecnicismi che finirebbero per demotivare i novizi nell’utilizzo di questo fantastico preprocessore.

Una cosa è certa: l’utilizzo di LESS vi consente di risparmiare molto tempo in fase di sviluppo e soprattutto in fase di mantenimento e modifica.

Le variabili e gli stili annidati sono due caratteristiche che a CSS mancano e che, secondo il mio punto di vista, andrebbero implementate come standard. Fino ad allora però, LESS rimane l’unica alternativa per utilizzarle.

Utilizzate LESS o SASS? Come vi trovate e come lo utilizzate? Fatecelo sapere nei commenti!

  • Ottimo articolo introduttivo! Ora ne attendiamo uno su SASS 🙂
    (io principalmente uso SASS poiché uso quasi esclusivamente Zurb Foundation come framework)

    • Grazie Massimo! Il mio primo approccio con i pre-processori fu con SASS ma poi passai a LESS per la semplicità e il rapido apprendimento. Li reputo praticamente uguali, forse qualche piccolo vantaggio per SASS su alcune cose. Magari in un prossimo articolo cercherò di fare una comparazione più dettagliata fra i due.

  • Ottimo articolo! Formidabile il parallelo con Dragon Ball ;D

  • giaba90

    in alternativa si potrebbe installare con il comando

    “npm install -g less” si scrive il codice in LESS e poi lo si compila ed esce il codice css. In più con la funzione “watch” si aggiorna in automatico

  • ibbatta

    Perdonate la mia ignoranza, ma da quali browser è supportato? Necessita obbligatoriamente una compilazione? Qual’è il miglior software (o perchè no, website) per compilarlo su mac e windows?

    A dispetto dei miei meri dubbi, trovo la guida veramente ben scritta, leggera e molto scorrevole (apprezzo tantissimo, tra l’altro, il paragone con Dragon Ball)

    Bravissimo!

    • Francesco Benanti

      Ciao, il supporto browser non c’entra. La compilazione avviene sul server o in locale. Tu lavori con dei file .less (o .scss nel caso di SASS) all’interno dei quali puoi utilizzare variabili, funzioni ecc, e poi viene compilato il tutto in formato .css.
      In realtà ci sono degli ottimi software che rimangono in ascolto di eventuali modifiche apportate ai file .less del progetto e ad ogni salvataggio compilano in .css
      Fra i migliori ti segnalo “Codekit 2” per Mac e “Prepros” per Windows.

      • ibbatta

        Quindi, sostanzialmente, quello che legge il browser, è un css base (il file sass o scss è semplicemente un aiuto per lo sviluppatore) … Pregunta: meglio SASS o LESS ?

        • Francesco Benanti

          Esatto, il browser legge sempre un CSS (chiaramente tu nelle tue pagine HTML devi fare riferimento ad un file CSS). Diciamo che il file .scss o .less è un file sorgente.
          Io ho abbandonato LESS da un po’ perché le ultime versioni di SASS sono superiori in parecchie cose. Tra l’altro su SASS ci sono delle librerie di mixins molto complete, fra tutte cito Compass e, la mia preferita, Bourbon.

          • ibbatta

            Sei stato preziosissimo… dato che devo iniziare a studiarmi sti linguaggi, inizio subito dal SASS (attenderò impaziente una guida come per LESS, sei stato ganzissimo!)

            A sto punto approfitto della tua gentilezza per chiederti anche se conosci qualche editor (o plugin per editors) che riconosca la sintassi dei 2 linguaggi, per avere più facilità nella costruzione del codice…
            (p.s. per SASS cosa si può usare di compilatore?)

          • Francesco Benanti

            Quasi tutti gli editor supportano la sintassi, se non dovessero basta impostare in modo tale che riconosca le estensioni .scss, .sass e .less come .css.
            Alcuni editor fanno qualcosa in più colorando le variabili e le funzioni in modo diverso: io uso SublimeText 3 che ha dei plugin molto completi ma anche Coda (solo su Mac) li supporta.
            Per entrambi i linguaggi va benissimo uno qualsiasi dei compilatori che ti consigliavo sopra.

          • ibbatta

            Stavo provando WinLess ma, come da nomenclatura, mi legge solo il LESS… mmmmm

          • Francesco Benanti

            Winless è molto limitato, meglio Prepros!

          • Gaetano Miccio

            in alternativa puoi usare Crunch less in editor less che all’occorrenza ti converte anche in css il file e se vuoi te lo minifica anche.

          • Gaetano Miccio

            Io preferisco LESS anche perchè è usato da bootstrap ad ogni modo salvo poche piccole differenze fanno più o meno la stessa cosa e le sintassi sono simili

  • ibbatta

    Una domanda: esiste un editor per sviluppatori, che riconosca le keyword di sass o less? (come per esempio aptana riconosce parole chiave di javascript, php, html, ecc) ?

    • Gaetano Miccio

      Sublimetext che ti consiglio di provare vivamente. Ottimo per tutti i linguaggi.

      • ibbatta

        Lo sto usando ora (il 2) ed è FA-VO-LO-SO!
        Abbinato al plugin “emmet” è una bomba vera!

    • marcellinux86

      se usi php , php storm di jetbrains

      • Gaetano Miccio

        Lo stiamo usando in ufficio, con GULP e BOWER si interfaccia da dio. Ottimo!

        • marcellinux86

          sto usando npm (node) per less

  • Andrea

    Ciao Francesco , ti chiedo scusa ma non riesco a capire come mai su WordPress non gira il file style.less del mio sito? Da un corso scrivevano cosi ma non funziona nulla

    <link rel="stylesheet/less"type="text/css"href="/less/style.less”>

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

    <script src="/js/libs/modernizr-2.0.6.min.js”>

    Son molto disorientato non riesco a capire il motivo.
    Mi dai un indicazione per favore?
    Buona giornata e buon lavoro

Shares