Share
I preprocessori CSS sono diventati uno strumento indispensabile per la maggior parte degli sviluppatori front-end. Tuttavia, nonostante i numerosi vantaggi che offrono, l'uso di strumenti come LESS, Stylus o Sass presenta anche nuovi problemi, uno dei quali parleremo (e risolviamo) in questo tutorial.
A meno che tu non stia lavorando su un piccolo sito Web con pochissime pagine, è buona norma dividere il foglio di stile in più moduli, oppure parziali. Ad esempio, potremmo separare gli stili per la navigazione nel loro nome parziale navbar.scss (il preprocessore qui è Sass). Quindi importiamo questo, insieme ad altri partial, in un unico foglio di stile primario usando il @importare direttiva dopo la quale saranno compilati in un singolo file CSS. Questo è dove inizia il problema.
I browser analizzano il CSS compilato, non i file di lavoro, che alla fine rendono più complicato il debug di stile. Il processo di debug può essere davvero complicato se gestisci un progetto su larga scala con dozzine di fogli di stile da gestire. Capire dove sono nati gli stili compilati può essere quasi impossibile.
Come puoi vedere qui sotto, l'ispettore web si riferisce al file .css, dicendoci che lo stile per il corpo è dichiarato on line 270. Questo non ci aiuta molto, perché nei nostri file di lavoro è in realtà dichiarato in scaffolding.less on line 27.
Usare un mappa di origine colpirà questi linguaggi di stile comunitario. Le mappe di origine sono file generati separatamente che consentono ai browser di tracciare il CSS compilato alla sua fonte originale. In realtà, le mappe sorgente possono essere utilizzate in molti ambienti di codifica:
"Le mappe sorgente offrono un modo agnostico per mappare il codice di produzione al codice originale che è stato creato." - Sayanee Basu
Per i nostri scopi, le mappe di origine rendono il debug di stile con un preprocessore CSS tanto familiare quanto con il semplice CSS. Come puoi vedere qui sotto, la web inspector ora mostra il riferimento allo stile alla fonte originale, grazie alla mappa sorgente.
Per iniziare, dobbiamo prima generare un file di mappa sorgente (.map) insieme al CSS generato. Questo file .map contiene il codice formattato JSON per fungere da riferimento tra il file compilato e la fonte originale. Sass ha aggiunto il supporto per la generazione di mappe sorgente nella versione 3.3, LESS l'ha aggiunto nella versione 1.5.0 e puoi anche trovare informazioni sul supporto di Stylus delle mappe sorgente nella documentazione.
Ognuno ha le proprie preferenze quando si tratta di raccogliere gli strumenti che si adattano al loro flusso di lavoro. Oltre alla CLI (Command Line Interface) nativa fornita da ciascun preprocessore CSS, abbiamo anche alcune altre opzioni come Grunt e Gulp, anche applicazioni come Codekit.
Tutti i principali preprocessori hanno la possibilità di creare una mappa sorgente tramite la loro CLI.
Con LESS, potresti includere --fonte-map contrassegno in questo modo:
lessc styles.less> styles.css --source-map = styles.css.map
Questo esempio compila styles.less in styles.css, mentre allo stesso tempo genera il file della mappa sorgente con il nome impostato su "styles.css.map".
Gli utenti Sass possono usare il --Sourcemap (senza il trattino) per fare lo stesso, ad esempio:
sass styles.scss: styles.css --sourcemap
A differenza di LESS, il --Sourcemap flag in Sass ci serve per specificare il nome del file. Per impostazione predefinita, Sass assegnerà il nome al file con lo stesso nome del foglio di stile compilato. Quindi, dato l'esempio precedente, il nome della mappa di origine sarebbe ancora "styles.css.map".
Proprio come Sass, Stylus richiede solo il --Sourcemap bandiera, o in aggiunta offre la stenografia -m:
stylus -m styles.styl
Di nuovo, questo ci dà "styles.css.map".
Se preferisci usare un runner come Grunt, usa grugnito-contrib-less, grugnito-contrib-sass o grugnito-contrib-stilo per compilare il CSS, quindi includere l'opzione per generare la mappa di origine. L'esempio sotto fa effettivamente lo stesso che abbiamo fatto nell'esempio precedente; genera una mappa sorgente denominata "styles.css.map" dal nostro file styles.less.
Accentsconagua
module.exports = function (grunt) grunt.initConfig (less: options: sourceMap: true, sourceMapFilename: styles.css.map, files: 'styles.css': 'styles.less' ); grunt.loadNpmTasks ( 'grunt-contrib-less'); grunt.registerTask ('default', ['less']); ;Gli utenti Sass possono utilizzare grunt-contrib-sass e impostare l'opzione nello stesso modo, ad esempio:
module.exports = function (grunt) grunt.initConfig (sass: options: sourcemap: 'auto', files: 'styles.css': 'styles.scss'); grunt.loadNpmTasks ( 'grunt-contrib-sass'); grunt.registerTask ('default', ['sass']); ;Il modo più semplice, in particolare se non sei così comodo con la riga di comando, è utilizzando un'interfaccia grafica come Codekit, Prepros o Koala. Con l'applicazione, la creazione di una mappa sorgente è semplice come un singolo clic.
L'opzione Mappa sorgente in Codekit.Una volta creata la mappa di origine, troverai un nuovo file .carta geografica nonché il riferimento che punta al file della mappa sorgente nella parte inferiore del foglio di stile compilato. Questo commento di riferimento sarà in genere simile a:
/ * # sourceMappingURL = style.css.map * /
Tutti i browser più recenti supportano le mappe sorgente. Safari si attiva automaticamente una volta disponibile il file della mappa di origine, senza necessità di configurazione. Negli altri browser come Firefox, Chrome e Opera, le mappe di origine potrebbero essere disattivate per impostazione predefinita, nel qual caso sarà necessario commutare le impostazioni.
In Firefox, l'ispezione della mappa di origine è disponibile solo tramite DevTools integrato di Firefox. Firebug - il componente aggiuntivo di debug una volta popolare per Firefox - non ha ancora aggiunto questa funzione, sfortunatamente. Pertanto, avvia Firefox DevTools e abilita le mappe di origine facendo clic con il tasto destro del mouse su qualsiasi riferimento di stile e selezionando "Mostra fonti originali" dal menu di scelta rapida.
In Chrome (oltre a Opera 12 e versioni successive) fai clic sull'icona "ingranaggio" nella finestra di ispezione Web e assicurati che Abilita mappe sorgente CSS è controllato.
Una volta creato il file della mappa di origine e attivata la funzionalità nel browser, è necessario trovare l'ispettore che punta alla fonte originale. In questo caso, puoi vedere l'ispettore che fa riferimento direttamente all'impalcatura.
Ora, con la potenza delle mappe sorgente a portata di mano, sarete in grado di eseguire il debug di stili compilati proprio come i web designer hanno fatto per anni con i CSS. Quindi, non dimenticare di generare una mappa sorgente per il tuo prossimo foglio di stile compilato!
