In questa guida introduttiva, illustreremo in maniera sintetica alcuni dei concetti fondamentali di Less CSS, un’interessante libreria che consente di superare alcuni dei limiti di CSS. Faremo riferimento alla versione 3.0.4 che è l’ultima disponibile al momento della stesura di questa lezione. Prima di proseguire, potrebbe essere utile consultare la seguente lezione sulla sintassi e la terminologia del linguaggio CSS.
Che cos’è Less
Less (acronimo di Leaner Style Sheets) è un’estensione del linguaggio CSS nata con lo scopo di arricchire quest’ultimo aggiungendo delle funzionalità che permettono di creare dei fogli di stile in maniera più efficiente e produttiva. Per poter utilizzare Less basterà creare dei file con estensione .less all’interno dei quali verranno inserite delle regole in modo simile a quanto avviene con i normali fogli di stile. Anche se è possibile includere direttamente i file .less all’interno di una pagina HTML con l’ausilio di uno script javascript, per motivi di prestazioni è opportuno convertirli prima in semplici file .css attraverso l’uso di un compilatore.
Attraverso la "compilazione" il file .less viene tradotto in un comune file .css.
Come compilare Less in CSS
Per convertire i file .less in .css è possibile usare diversi metodi. È possibile affidarsi a strumenti come Grunt, Gulp, Webpack o Rollup e configurarli in modo da compilare i file .less a seconda delle nostre esigenze. Per semplicità, nel corso di queste lezioni compileremo invece i file .less via linea di comando.
Installare il comando lessc attraverso NPM
Procediamo quindi all’installazione dei package necessari attraverso NPM. (Per poter usare NPM, è necessario installare Node.js)
npm install -g lessGrazie all’opzione -g installiamo il comando lessc a livello globale e possiamo lanciarlo via linea di comando. Se l’installazione viene completata correttamente, possiamo eseguire il seguente comando che mostrerà la versione installata del compilatore.
lessc --version
lessc 3.0.4 (Less Compiler) [JavaScript]È anche possibile visualizzare tutte le opzioni disponibili con il seguente comando.
lessc --helpCompilare i file .less con il comando lessc
Vediamo ora come utilizzare il compilatore attraverso un semplice esempio. Supponiamo di avere due file index.html e style.less contenenti i frammenti di codice riportati sotto.
<!-- file index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Less - Esempio 1</title>
</head>
<body>
<div class="box">
<p>Ciao</p>
</div>
</body>
</html>/* file style.less */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.box {
width: 300px;
height: 180px;
line-height: 180px;
text-align: center;
background-color: #fb1;
border-radius: 4px;
}
p {
font-size: 3em;
color: #101;
font-family: 'Courier New', Courier, monospace;
}In questo primo esempio non abbiamo incluso nessuna delle funzionalità specifiche di Less. Per questo motivo, compilando il file style.less, verrà generato l’omonimo file style.css contenente le stesse linee di codice. (Verranno solo rimosse le righe vuote presenti fra una regola e l’altra)
/* file style.css */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.box {
width: 300px;
height: 180px;
line-height: 180px;
text-align: center;
background-color: #fb1;
border-radius: 4px;
}
p {
font-size: 3em;
color: #101;
font-family: 'Courier New', Courier, monospace;
}Per compilare il file style.less abbiamo lanciato il seguente comando all’interno della cartella che lo contiene.
lessc style.less style.cssIl primo argomento rappresenta il file da compilare, il secondo è invece il file di destinazione.
È evidente che compilare manualmente i file con estensione .less ogni volta che vengono salvati, può risultare stancante e poco produttivo. Proprio per questo motivo è conveniente usare uno degli strumenti menzionati in precedenza anche perché il comando lessc non presenta una modalità che consente di eseguirlo automaticamente quando un file viene salvato. Tuttavia, dal momento che abbiamo deciso di compilare i file .less via linea di comando, ci avvarremo di un ottimo package disponibile su NPM. Si tratta di chokidar-cli. Dopo averlo installato globalmente (npm install -g chokidar-cli ), eseguiremo il seguente comando nella cartella in cui è presente il file con estensione .less:
chokidar '*.less' -c 'lessc style.less style.css'Vogliamo osservare eventuali cambiamenti dei file con estensione .less e lanciare ogni volta il comando specificato con l’opzione ‘-c’. In questo modo verrà generato automaticamente un nuovo file con estensione .css contenente le ultime modifiche. Nel nostro esempio il file index.html includerà quindi il file compilato style.css. Per questo motivo abbiamo anche lanciato browser-sync (npm install -g browser-sync) in un altro tab del terminale (browser-sync start -s -f "index.html" "*.css"), in modo da intercettare qualsiasi modifica dei file index.html o style.css e aggiornare direttamente la pagina del browser.
Conclusioni
In questa prima lezione abbiamo visto come installare e compilare un file con estensione .less via linea di comando. A partire dalla prossima lezione inizieremo ad analizzare alcune delle funzionalità più interessanti presenti in less.
