back to top

Less CSS source maps

Uno dei problemi introdotti dall’uso di un preprocessore come Less, specialmente quando si utilizzano vari file che vengono importati con la direttiva @import, si manifesta in fase di debugging. Se infatti apriamo gli strumenti per sviluppatori del browser e ispezioniamo le regole applicate a un certo elemento, viene fatto riferimento solo al file CSS finale.

devtools senza sourcemaps css

In un progetto di grandi dimensioni può risultare particolarmente complicato risalire al file originale che contiene la regola a cui siamo interessati.

Per risolvere questo tipo di situazioni possiamo però generare le source map che mantengono le informazioni sui file originali e, nei browser che le supportano, possiamo eseguire le operazioni di debugging direttamente sui file di partenza.

In browser come Chrome è possibile abilitare il supporto alle source map nelle opzioni degli strumenti per sviluppatori.

abilitare le source map in Chrome

Possiamo quindi lanciare il comando lessc con l’opzione –source-map.

lessc style.less style.css --source-map

Nel nostro caso sarà generato un file style.css.map nella stessa directory del file style.less. Alla fine del file style.css verrà invece inserito un commento particolare per indicare qual è il file con estensione .map associato.

/*# sourceMappingURL=style.css.map */

Se riapriamo quindi gli strumenti per sviluppatori del browser, visualizzeremo le informazioni aggiornate e il browser non farà più riferimento al file style.css, ma permetterà di lavorare direttamente sui file con estensione .less originali.

devtools dopo abilitazione sourcemaps css
pannello source devtools con accesso ai file less

A partire dalla prossima lezione parleremo dei mixin.

Pubblicità
Articolo precedente
Articolo successivo