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
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.
Se siete quindi interessati, vi invito ad approfondire il tema, segnalandovi qualche link di riferimento:
- https://www.webtoolkitonline.com/less-to-css.html– Pagina ufficiale;
- http://nodejs.org/ – Pagina di NodeJS (per l’installazione del compilatore);
- http://docs.pagelines.com/advanced/less-css – Esempi;
- https://www.webtoolkitonline.com/less-to-css.html – Converitore on-line LESS2CSS.
Articoli correlati:
- Novità dal mondo Plesk: così sviluppare diventa più semplice!
- Quando l’Assistenza Clienti diventa un punto di forza
- SMXL Milano 2016: quando il digital marketing diventa Extra Large
- Come fare il backup WordPress con l’aiuto dei plugin
- Errore 500 su un sito WordPress: best pratice per l’immediata risoluzione
- Magento 2: primi passi per la creazione di un template custom
Una risposta