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.
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.
Possiamo quindi lanciare il comando lessc con l’opzione –source-map.
lessc style.less style.css --source-mapNel 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.
A partire dalla prossima lezione parleremo dei mixin.
