Share
CSS preprosessorer har blitt et uunnværlig verktøy for de fleste utviklere i fremtiden. Til tross for de mange fordelene de gir, ved hjelp av verktøy som LESS, presenterer Stylus eller Sass også nye problemer, hvorav vi skal snakke om (og løse) i denne opplæringen.
Med mindre du jobber på et lite nettsted med svært få sider, er det en vanlig best praksis å dele stilarket i flere moduler, eller partials. For eksempel kan vi skille stilene for navigering til deres eget delvis navngitte navbar.scss (forprosessoren her er Sass). Deretter importerer vi dette, sammen med andre deler, til en enkelt primær stilark ved hjelp av @importere direktivet, hvorpå de vil bli samlet inn i en enkelt CSS-fil. Det er her problemet begynner.
Nettlesere analyserer kompilert CSS, ikke arbeidsfilene dine, noe som i siste instans gjør stilfeilingen vanskeligere. Feilsøkingsprosessen kan være veldig tungvint hvis du håndterer et storskala prosjekt med dusinvis av stilark for å håndtere. Å finne ut hvor kompilerte stiler stammer, kan være nesten umulig.
Som du kan se nedenfor, refererer webinspektøren til .css-filen, og forteller oss at stilen for kropp er erklært på linje 270. Det hjelper oss ikke mye, fordi i våre arbeidsfiler det faktisk er erklært i stillas.løs på linje 27.
Bruker en kilde kart vil bygge bro over disse språkene i felles stil. Kildekart er separat genererte filer som tillater nettlesere å spore kompilert CSS tilbake til sin opprinnelige kilde. Faktisk kan kildekart brukes i mange kodende miljøer:
"Kildekart tilbyr en språk-agnostisk måte å kartlegge produksjonskoden til den opprinnelige koden som ble skrevet." - Sayanee Basu
For våre formål gjør kildeskart stilfeil med en CSS preprosessor som kjent som å jobbe med vanlig CSS. Som du kan se nedenfor, viser nettinspektøren nå stilreferansen til den opprinnelige kilden, takket være kildekartet.
For å komme i gang må vi først generere en kildekartfil (.map) sammen med det genererte CSS. Denne .map-filen inneholder JSON formatert kode for å fungere som en referanse mellom kompilert fil og den opprinnelige kilden. Sass la til støtte for generering av kildekart i versjon 3.3, LEST lagt til det i versjon 1.5.0 og du kan også finne informasjon om Stylus-støtte av kildekart i dokumentasjonen..
Alle har sin egen preferanse når det gjelder å plukke opp verktøyene som passer inn i arbeidsflyten. Bortsett fra det innfødte Command Line Interface (CLI) som hver CSS preprocessor gir, har vi også noen andre alternativer som Grunt and Gulp, selv applikasjoner som Codekit.
Alle de viktigste preprosessorer har muligheten til å lage et kildekart gjennom CLI.
Med mindre kan du inkludere --source-kartet flagg denne måten:
lessc styles.less> styles.css --source-map = styles.css.map
Dette eksemplet kompilerer styles.less i styles.css, samtidig som du genererer kildekartfilen med navnet satt til "styles.css.map".
Sass-brukere kan bruke --sourcemap (uten bindestrek) for å gjøre det samme, for eksempel:
sass styles.scss: styles.css --surkemap
I motsetning til MINDRE, --sourcemap flagg i Sass trenger oss til å spesifisere filnavnet. Sass vil navngi filen med samme navn som det sammensatte stilarket som standard. Så, gitt det ovennevnte eksemplet, vil kildenavnetavnet fortsatt være "styles.css.map".
På samme måte som Sass, krever Stylus bare --sourcemap flagg, eller i tillegg tilbyr stenografi -m:
stylus -m styles.styl
Igjen, dette gir oss "styles.css.map".
Hvis du foretrekker å bruke en oppgaveløper som Grunt, bruk grunt-contrib-mindre, grynt-contrib-sass eller grynt-contrib-pennen å kompilere CSS, og deretter inkludere muligheten til å generere kildekartet. Eksempelet nedenfor gjør det samme som vi gjorde i det forrige eksempelet; det genererer et kildeskjema med navnet "styles.css.map" fra vår styles.less-fil.
Accentsconagua
modul.grp ); grunt.loadNpmTasks ( 'grov-contrib-mindre'); grunt.registerTask ('standard', ['mindre']); ;Sass-brukere kan bruke grunt-contrib-sass og sette alternativet på samme måte, for eksempel:
module.exports = funksjon (grunt) grunt.initConfig (sass: alternativer: sourcemap: 'auto', filer: 'styles.css': 'styles.scss'); grunt.loadNpmTasks ( 'grov-contrib-sass'); grunt.registerTask ('standard', ['sass']); ;Den enkleste måten, spesielt hvis du ikke er så komfortabel med kommandolinjen, er å bruke et grafisk grensesnitt som Codekit, Prepros eller Koala. Med applikasjonen er opprettelse av et kildeskart like enkelt som et enkelt klikk.
Alternativet Kildekart i kodekit.Når kildekartet er opprettet, finner du en ny fil .kart samt referansen som peker på kildekartfilen nederst i det sammensatte stilarket. Denne referansebeskrivelsen vil vanligvis se litt ut som:
/ * # sourceMappingURL = style.css.map * /
Alle de nyeste nettleserne støtter kildekart. Safari aktiverer seg når kildekartfilen er tilgjengelig, uten behov for konfigurasjon. I de andre nettleserne, slik som Firefox, Chrome og Opera, kan kildekart være slått av som standard. I så fall må du bytte innstillingene.
I Firefox er kildekartinspeksjon bare tilgjengelig via de innebygde DevTools fra Firefox. Firebug - den gang populære debugging-tillegget for Firefox - har ennå ikke lagt til denne funksjonen, dessverre. Start derfor Firefox DevTools og aktiver kildekart ved å høyreklikke på hvilken som helst stilreferanse og velg "Vis originale kilder" fra hurtigmenyen.
I Chrome (samt Opera 12 og oppover) klikker du på "gear" -ikonet i nettinspektøren og sørger for at Aktiver CSS kildekart er sjekket.
Når kildekartfilen er opprettet og funksjonen i nettleseren er aktivert, bør du finne inspektøren som peker på den opprinnelige kilden. I dette tilfellet kan du se inspektøren direkte referere til stillas.løs.
Nå, med kraften til kildekartene ved fingertipsene dine, kan du feilsøke kompilerte stiler akkurat som webdesignere har gjort med CSS i mange år. Så ikke glem å generere et kildeskart for ditt neste sammensatte stilark!
