Sass è uno strumento che fornisce un gran numero di funzionalità, ma possono sorgere alcune difficoltà in fase di debugging, specialmente quando si utilizzano vari file che vengono importati con la direttiva @import. Aprendo gli strumenti per sviluppatori di un browser come Google Chrome e ispezionando le regole applicate a un certo elemento, viene fatto riferimento soltanto al codice presente all’interno dei file CSS.
Per facilitare la fase di debugging possiamo generare dei file detti source-map che mantengono delle informazioni sui file con estensione .scss e, all’interno degli strumenti per sviluppatori, possiamo quindi visualizzare i dettagli dei file originali invece dei file CSS generati dal compilatore.
In browser come Google Chrome si può abilitare il supporto alle source map all’interno delle opzioni degli strumenti per sviluppatori.
Dopo aver abilitato il supporto alle source-map nel browser, basterà specificare l’opportuna opzione per il comando node-sass. In particolare useremo –source-map e indicheremo la cartella in cui devono essere creati i file source-map. Facendo riferimento alla struttura della directory vista negli esempi precedenti, potremmo lanciare il seguente comando.
node-sass scss --output-style compressed
--output css --source-map source-mapsCol comando specificato sopra (compiliamo i file .scss presenti nella cartella scss) verranno generati i file source-map all’interno della cartella source-maps. Per esempio sarà generato un file style.css.map e alla fine del file style.css, creato in fase di compilazione, verrà aggiunto un commento speciale che serve a indicare qual è il file con estensione .map associato.
/*# sourceMappingURL=style.css.map */A questo punto possiamo riaprire gli strumenti per sviluppatori del browser e osservare che le informazioni che in precedenza facevano riferimento ai file con estensione .css sono ora relative ai file originali con estensione .scss.
Anche nel pannello Sources possiamo visualizzare il codice originale nei relativi file.
Conclusioni
In questa e nelle precedenti versioni abbiamo illustrato alcuni modi per organizzare meglio il codice ed evitare di duplicare inutilmente blocchi di dichiarazioni. Nella prossima lezione affronteremo un altro argomento interessante, ovvero i mixin.
