css-programmazione

LESS: Il CSS diventa un linguaggio di programmazione

Indice dei contenuti

LESS

Noi di Seeweb seguiamo spesso in qualità di sponsor molti eventi informatici internazionali, da sempre ricchi di spunti ed approfondimenti. In particolare, nel PHPday di Verona dello scorso maggio, tra gli interventi che più mi hanno incuriosito, c’è stato senza dubbio la presentazione di LESS, una libreria che trasforma il CSS in vero e proprio linguaggio di programmazione.  Ho sempre ritenuto la scrittura di un file CSS molto ripetitiva, nonché soggetta a facili errori e di difficile formattazione.

Derivato da SASS, la  libreria LESS sembra venire incontro a queste problematiche,  permettendoci di utilizzare i concetti dei linguaggi di programmazione, come funzioni e variabili, per scrivere un foglio di stile.

Ho deciso così di provare ad usare LESS e sono rimasto molto soddisfatto delle funzionalità che esso offre, e ho pensato di farne una breve presentazione che spero possa essere utile a chi volesse avvicinarsi a questa tipologia di scrittura dei CSS.

Nonostante un file .less possa essere importato direttamente nel codice aggiungendo nel codice un js che compila in runtime il file .less, non consiglio l’uso di questa pratica in quanto poco performante per un sito in produzione.

La scelta migliore è quella di installare il suo compilatore e scrivere il file .less fruttando tutte le caratteristiche e le funzioni di questa libreria, per generare dei file .css.

Vedremo ora come installare ed usare LESS per creare un CSS e quali sono i principali vantaggi di questa soluzione.

1) Installazione ed esecuzione di LESS.

Il metodo più semplice per installarlo su una piattaforma Linux, è sicuramente attraverso il packet manager npm di node.js, il quale va preventivamente installato sul server:

$ npm install -g less

Una volta installato, sarà possibile scrivere il file .less, e poi trasformarlo in un file .css:

$ lessc style.less > style.css

Se si vuole generare il file minified, basta passare al compilatore l’opzione -x.

2) I vantaggi

Tra le varie funzionalità che questa libreria mette a disposizione, queste sono sicuramente le più significative:

– La  gerarchia cascading: al contrario del CSS, con LESS è possible definire i blocchi in modo gerarchico, ereditando gli attributi del blocco padre:

Ad esempio:

.container {
   font-family: Arial;

   .block {
      padding-left:4px;

      h2 {
         font-size:24px;

      }
   }
}

verrà generato sul css in questa maniera:

.container {
   font-family: Arial;
}

.container .block {
   padding-left: 4px;
}

.container .block h2 {
   font-size: 24px;
}

– L’uso delle variabili: LESS permette di sfruttare le variabili ed evitare lunghe ripetizioni molto fastidiose in caso di sostituzione. Ad esempio, possiamo definire delle variabile per i colori principali, o definire dei path da riutilizzare:

@colore-principale: #FFcc00;
@colore-secondario: #ccFF00;
@directory: "/var/www/dominio.ext/htdocs/project";

Una volta compilati saranno inseriti nel css. Le variabili, come in un vero linguaggio di programmazione, rispettano lo scope, e possono essere definite globalmente (fuori da un blocco) o localmente (all’interno di un blocco).

– Gli operatori aritmetici: è possibile usare i comuni operatori aritmetici elementari (+ – * /) per manipolare i numeri, come ad esempio le dimensioni dei blocchi o la dimensione del testo:

@font-base: 20px;

.highlight {
   font: (@font-base+5px);
}

– I mixin: Possiamo definire un mixin che servirà da base per la costruzione degli altri blocchi, che può essere richiamato all’interno dei blocchi successivi. la combinazione con le variabili e gli operatori, trasforma i mixin in vere e proprie funzioni:

.font-base {
    font-family: Arial, sans-serif;
    font-size: @font-base;
    color: @colore-principale;
    }

.container {
    .font-base;
    background:url('@{directory}/background.png');
    h2 {
       font-size:(@font-base+5px);
       }
    }

– Le funzioni di modifica del colore: in LESS è possibile modificare molti aspetti del colore come la saturazione, la trasparenza, lo spin ed il fade, sia aumentandoli che diminuendoli, con gli appositi attributi:

border: 2px solid lighten(@colore-principale, 10%); 
// colore 10% "più chiaro" di @colore-principale

border: 2px solid darken(@colore-principale, 30%); 
// colore 30% "più scuro" di @colore-principale

border: 2px solid saturate(@color-principale, 20%); 
// colore 20% "più saturato" di @colore-principale

border: 2px solid fadeout(@colore-principale, -50%); 
// colore 50% "meno trasparente" di @colore-principale
 3) Conclusioni
Spiegati i principali vantaggi dell’uso di LESS rispetto al CSS, ci risulta subito chiaro che con questa libreria è più facile mantenere il codice e apportare modifiche allo stile.

 

La programmazione a cascata ed i blocchi innestati, rendono più chiara e semplice la programmazione.

 

L’uso delle variabili, operatori e mixin, permettono la creazione di un CSS fruttando delle vere e proprie funzioni che ne semplificano la programmazione.
Ovviamente, strumenti come questo, vanno a vantaggio soprattutto di chi progetta ex novo un foglio di stile, ed è abituato alla programmazione.

 

Il semplice CSS invece, come da specifiche W3C, non è un linguaggio di programmazione, e per questo il suo principale vantaggio è che permette un apprendimento molto veloce, ma di contro manca di una struttura formale, e richiede un gran numero di ripetizioni, specie per file molto complessi.

 

Raccomando tuttavia di includere nel file sempre il foglio .css generato dal compilatore less, e non includere in un sito in produzione direttamente il file .less ed il relativo compilatore in Javascript, per non introdurre inutile ritardo di elaborazione nella visualizzazione della pagina. Tale funzione, può essere utile in ambienti di sviluppo. Una volta terminato lo sviluppo, bisogna sempre generare il CSS, possibilmente in versione minified.

Ho ritenuto molto utile l’uso di questa libreria, e ho provato a spiegarne le funzioni principali ed i suoi vantaggi in questo breve articolo di presentazione.

Se siete quindi interessati, vi invito ad approfondire il tema, segnalandovi qualche link di riferimento:

CONDIVIDI SUI SOCIAL

Una risposta

Lascia un commento

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

− 1 = 9