LESS: Il CSS diventa un linguaggio di programmazione

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:

Una volta installato, sarà possibile scrivere il file .less, e poi trasformarlo in un file .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:

verrà generato sul css in questa maniera:

– 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:

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:

– 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:

– 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:

 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:

Un commento a LESS: Il CSS diventa un linguaggio di programmazione

  1. […] come una sorta di evento interno ad una track del JsDay e si discuterà di tecnologia con SASS, LESS, di CSS Framework come Bootstrap e si introdurranno le best practices […]

Lascia un commento

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

*

Accedi

Registrati | Password dimenticata?