Share
CSS-förprocessorer har blivit ett oumbärligt verktyg för de flesta front-end-utvecklare. Men trots de många fördelar som de tillhandahåller, använder vi verktyg som LESS, Stylus eller Sass, även nya problem, av vilka vi ska prata om (och lösa) i denna handledning.
Om du inte arbetar på en liten webbplats med mycket få sidor, är det en vanlig bästa praxis att dela stilarket i flera moduler, eller partials. Till exempel kunde vi skilja åt stilar för navigering till deras egna parti med namnet navbar.scss (förprocessorn här är Sass). Då importerar vi detta tillsammans med andra partiklar till ett enda primärt stilark med hjälp av @importera direktivet, varefter de kommer att sammanställas i en enda CSS-fil. Det är här problemet börjar.
Webbläsare analyserar den sammanställda CSS, inte dina arbetsfiler, vilket i slutändan gör stilfelsökning mer knepigt. Felsökningsprocessen kan vara mycket besvärlig om du hanterar ett stort projekt med dussintals stilark för att hantera. Att räkna ut var kompilerade stilar har sitt ursprung kan vara nästan omöjliga.
Som du kan se nedan, refererar webinspektören till .css-filen och berättar för oss att stilen för kropp förklaras på rad 270. Det hjälper oss inte mycket, för i våra arbetsfiler är det faktiskt deklarerat i byggnadsställningar. Lösa på rad 27.
Använder en källkarta kommer att överbrygga dessa kommunala stil språk. Källkartor är separat genererade filer som gör det möjligt för webbläsare att spåra den sammanställda CSS tillbaka till sin ursprungliga källa. I själva verket kan källkartor användas i många kodande miljöer:
"Källkartor erbjuder ett språk-agnostiskt sätt att kartlägga produktionskoden till den ursprungliga koden som var författad." - Sayanee Basu
För våra ändamål gör källkartor stilfelsökning med en CSS-förprocessor som är känd som att arbeta med vanlig CSS. Som du kan se nedan visar webinspektören nu stilreferensen till den ursprungliga källan tack vare källkartan.
För att komma igång måste vi först skapa en källkartfil (.map) tillsammans med den genererade CSS. Denna .map-fil innehåller JSON-formaterad kod för att fungera som en referens mellan den sammanställda filen och den ursprungliga källan. Sass lade till stödet för att generera källkartor i version 3.3, LÄSER tillagt det i version 1.5.0 och du kan också hitta information om Stylus-stöd för källkartor i dokumentationen.
Alla har sin egen preferens när det gäller att hämta de verktyg som passar in i arbetsflödet. Bortsett från det ursprungliga kommandoradsgränssnittet (CLI) som varje CSS-förprocessor tillhandahåller, har vi också några andra alternativ som Grunt and Gulp, även applikationer som Codekit.
Alla huvudprocessorer har möjlighet att skapa en källkarta via deras CLI.
Med LESS kan du inkludera --source-karta flagga på detta sätt:
lessc styles.less> styles.css --source-map = styles.css.map
I det här exemplet sammanställs styles.less i styles.css, samtidigt som du skapar källkartfilen med namnet inställt på "styles.css.map".
Sass-användare kan använda --sourcemap (utan bindestreck) för att göra detsamma, till exempel:
sass styles.scss: styles.css --surkemap
Till skillnad från MINDER, --sourcemap flagga i Sass behöver oss att ange filnamnet. Sass kommer att namnge filen med samma namn som det sammanställda stilarket som standard. Så, med tanke på ovanstående exempel, skulle källkortsnamnet fortfarande vara "styles.css.map".
Precis som Sass kräver Stylus bara --sourcemap flagga, eller erbjuder dessutom stenografi -m:
stylus -m styles.styl
Återigen ger detta oss "styles.css.map".
Om du föredrar att använda en arbetslöpare som Grunt, använd grunt-contrib-mindre, grunt-contrib-sass eller grunt-contrib-stylus för att kompilera CSS, då inkludera alternativet att generera källkartan. Exemplet nedan gör detsamma som vi gjorde i föregående exempel; det genererar en källkarta med namnet "styles.css.map" från vår styles.less-fil.
Accentsconagua
module.xports ); grunt.loadNpmTasks ( 'grunt-contrib-mindre'); grunt.registerTask ('default', ['mindre']); ;Sass-användare kan använda grunt-contrib-sass och ange alternativet på samma sätt, till exempel:
module.exports = function (grunt) grunt.initConfig (sass: alternativ: sourcemap: 'auto', filer: 'styles.css': 'styles.scss'); grunt.loadNpmTasks ( 'grunt-contrib-sass'); grunt.registerTask ('default', ['sass']); ;Det enklaste sättet, särskilt om du inte är så bekväm med kommandoraden, är att använda ett grafiskt gränssnitt som Codekit, Prepros eller Koala. Med applikationen är det så enkelt att skapa en källkarta som ett enda klick.
Alternativet Källkarta i kodkod.När källkartan är lyckad skapad hittar du en ny fil .Karta samt referensen som pekar på källkartfilen längst ner i det sammanställda formatarket. Den här referenskommentaren ser normalt ut som:
/ * # sourceMappingURL = style.css.map * /
Alla de senaste webbläsarna stöder källkartor. Safari aktiverar sig när källkartfilen är tillgänglig, utan att det behövs konfiguration. I andra webbläsare, t.ex. Firefox, Chrome och Opera, kan källkartor vara avstängda som standard, i så fall måste du växla inställningarna.
I Firefox är källkortsinspektion endast tillgänglig via de inbyggda DevTools i Firefox. Firebug - den enda populära debugging-tillägget för Firefox - har ännu inte lagt till den här funktionen, tyvärr. Därför startar du Firefox DevTools och aktiverar källkartor genom att högerklicka på vilken stilreferens som helst och välja "Visa ursprungliga källor" från snabbmenyn.
I Chrome (liksom Opera 12 och uppåt) klickar du på "gear" -ikonen i webbinspektören och ser till att Aktivera CSS-källkartor är kontrollerad.
När källkartfilen är skapad och funktionen i webbläsaren är aktiverad bör du hitta inspektören som pekar på den ursprungliga källan. I det här fallet kan du se inspektören direkt hänvisa till byggnadsställning.
Nu, med kraften i källkartor med fingertopparna kan du debugera kompilerade stilar precis som webbdesigners har gjort med CSS i åratal. Så glöm inte att skapa en källkarta för ditt nästa sammanställda stilark!
