Share
CSS-preprocessors zijn een onmisbare tool geworden voor de meeste front-end ontwikkelaars. Ondanks de vele voordelen die ze bieden, bieden tools zoals LESS, Stylus of Sass echter ook nieuwe problemen, waarvan we er één zullen bespreken (en oplossen) in deze tutorial..
Tenzij u op een kleine website met zeer weinig pagina's werkt, is het een algemene beste praktijk om het stylesheet in verschillende modules te verdelen, of partials. We kunnen bijvoorbeeld de stijlen voor navigatie scheiden in hun eigen gedeeltelijke benoemde navbar.scss (de preprocessor is hier Sass). Vervolgens importeren we dit, samen met andere partials, in één hoofdstijlblad met behulp van de @importeren richtlijn waarna ze worden samengevoegd in één CSS-bestand. Dit is waar het probleem begint.
Browsers analyseren de gecompileerde CSS, niet uw werkbestanden, waardoor stijlopsporing lastiger wordt. Het foutopsporingsproces kan erg omslachtig zijn als u een grootschalig project met tientallen stylesheets behandelt om te beheren. Uitzoeken waar gecompileerde stijlen zijn ontstaan, kan bijna onmogelijk zijn.
Zoals u hieronder kunt zien, verwijst de webinspecteur naar het CSS-bestand en vertelt ons dat de stijl voor de .css-bestand lichaam wordt online verklaard 270. Dat helpt ons niet veel, omdat het in onze werkbestanden feitelijk in steigers wordt verklaard 27.
Met behulp van een bronkaart zal deze gemeenschappelijke stijltalen overbruggen. Bronkaarten zijn afzonderlijk gegenereerde bestanden waarmee browsers de gecompileerde CSS kunnen traceren naar de oorspronkelijke bron. Eigenlijk kunnen bronkaarten in veel codeeromgevingen worden gebruikt:
"Bronkaarten bieden een taal-agnostische manier om productiecode in kaart te brengen op de originele code die is geschreven." - Sayanee Basu
Voor onze doeleinden maken bronkaarten stijldebugging met een CSS-preprocessor die bekend is van werken met platte CSS. Zoals u hieronder kunt zien, toont de webinspectie nu de stijlverwijzing naar de originele bron, dankzij de bronkaart.
Om te beginnen, moeten we eerst een bronmapbestand (.map) samen met de gegenereerde CSS genereren. Dit .map-bestand bevat JSON-geformatteerde code die dient als referentie tussen het gecompileerde bestand en de oorspronkelijke bron. Sass heeft de ondersteuning toegevoegd voor het genereren van bronkaarten in versie 3.3, LESS heeft het toegevoegd in versie 1.5.0 en u kunt ook informatie vinden over de ondersteuning van de stylus van bronkaarten in de documentatie..
Iedereen heeft zijn eigen voorkeur als het gaat om het oppakken van de tools die passen in hun workflow. Naast de native Command Line Interface (CLI) die elke CSS-preprocessors biedt, hebben we ook een paar andere opties zoals Grunt en Gulp, zelfs toepassingen zoals Codekit.
Alle belangrijke preprocessors hebben de mogelijkheid om via hun CLI een bronkaart te maken.
Met LESS kunt u opnemen --source-map vlag op deze manier:
lessc styles.less> styles.css --source-map = styles.css.map
In dit voorbeeld wordt styles.less samengevoegd in styles.css, terwijl tegelijkertijd het bronkaartbestand wordt gegenereerd met de naam ingesteld op "styles.css.map".
Sass-gebruikers kunnen de --sourcemap (zonder het koppelteken) om hetzelfde te doen, bijvoorbeeld:
sass styles.scss: styles.css --sourcemap
In tegenstelling tot MINDER, de --sourcemap vlag in Sass heeft ons nodig om de bestandsnaam op te geven. Sass benoemt standaard het bestand met dezelfde naam als het blad met de gecompileerde stijl. Dus, gezien het bovenstaande voorbeeld zou de naam van de bronkaart nog steeds "styles.css.map" zijn.
Net als Sass vereist Stylus alleen de --sourcemap vlag, of biedt daarnaast de steno aan -m:
stylus -m styles.styl
Nogmaals, dit geeft ons "styles.css.map".
Gebruik als u liever een taakrunner zoals Grunt gebruikt grunt-contrib-less, grunt-contrib-Sass of grunt-contrib-stylus om de CSS te compileren, voeg dan de optie toe om de bronkaart te genereren. Het onderstaande voorbeeld doet in feite hetzelfde als in het vorige voorbeeld; het genereert een bronkaart met de naam "styles.css.map" uit ons styles.less-bestand.
Accentsconagua
module.exports = functie (grunt) grunt.initConfig (minder: options: sourceMap: true, sourceMapFilename: styles.css.map, files: 'styles.css': 'styles.less' ); grunt.loadNpmTasks ( 'grunt-contrib-loze'); grunt.registerTask ('standaard', ['minder']); ;Sass-gebruikers kunnen grunt-contrib-sass gebruiken en de optie op dezelfde manier instellen, bijvoorbeeld:
module.exports = functie (grunt) grunt.initConfig (sass: options: sourcemap: 'auto', bestanden: 'styles.css': 'styles.scss'); grunt.loadNpmTasks ( 'grunt-contrib-sass'); grunt.registerTask ('standaard', ['sass']); ;De gemakkelijkste manier, vooral als je niet zo comfortabel bent met de opdrachtregel, is door een grafische interface zoals Codekit, Prepros of Koala te gebruiken. Met de toepassing is het maken van een bronkaart net zo eenvoudig als een enkele klik.
De Source Map-optie in Codekit.Nadat de bronkaart met succes is gemaakt, vindt u een nieuw bestand .kaart evenals de verwijzing die naar het bronkaartbestand aan de onderkant van het gecompileerde stijlblad verwijst. Deze referentiecommentaar ziet er normaal gesproken een beetje uit als:
/ * # sourceMappingURL = style.css.map * /
Alle nieuwste browsers ondersteunen bronkaarten. Safari zal zichzelf activeren zodra het bronkaartbestand beschikbaar is, zonder configuratie. In de andere browsers zoals Firefox, Chrome en Opera zijn bronkaarten mogelijk standaard uitgeschakeld. In dat geval moet u de instellingen wijzigen.
In Firefox is bronkaartinspectie alleen beschikbaar via de ingebouwde DevTools van Firefox. Firebug - de ooit populaire debugging-add-on voor Firefox - heeft deze functie helaas nog niet toegevoegd. Start daarom de Firefox DevTools en schakel bronkaarten in door met de rechtermuisknop te klikken op elke stijlverwijzing en "Toon originele bronnen" in het contextmenu te selecteren.
In Chrome (evenals Opera 12 en hoger) klikt u op het pictogram 'versnelling' in de webinspector en controleert u dat Schakel CSS-bronmaps in is nagekeken.
Zodra het bronkaartbestand is gemaakt en de functie in de browser is ingeschakeld, zou u moeten zien dat de inspecteur naar de oorspronkelijke bron wijst. In dit geval kunt u zien dat de inspecteur direct refereert aan steigers.loos.
Nu, met de kracht van bronkaarten om uw vingertoppen, kunt u gecompileerde stijlen debuggen net zoals webontwerpers al jaren met CSS doen. Vergeet dus niet om een bronkaart te genereren voor uw volgende gecompileerde stylesheet!
