Sass til CSS Hvordan opprettholde Whitespace på Compile

Har du noen gang ønsket å beholde den visuelle strukturen til Sass-filene dine, når du kompilerer til CSS, uten å miste noe av hvite rom? I dette raske tipset skal jeg vise deg hvordan!

Se Quick Tips

Dette raske tipset er for de av dere som trenger å kompilere Sass til et "utvidet" skjema. Hvis du kompilerer til "komprimert" eller "minifisert" så er hele spørsmålet om at det er hvite rom irrelevant.

Problemet

Tenk deg at du har flere Sass-partikler som er formatert slik, inkludert de tomme linjeskiftene nederst:

/ ************************************************* ***************************** * * Delvis. * ************************************************ **************************** / body font-size: 100%;  

Å samle dem under normale omstendigheter vil gi deg noe som:

/ ************************************************* ***************************** * * Delvis. * ************************************************ **************************** / body font-size: 100%;  / *********************************************** ****************************** * * Delvis. * ************************************************ **************************** / body font-size: 100%;  / *********************************************** ****************************** * * Delvis. * ************************************************ **************************** / body font-size: 100%;  

Men la oss si at du faktisk vil ha følgende:

/ ************************************************* ***************************** * * Delvis. * ************************************************ **************************** / body font-size: 100%;  / *********************************************** ****************************** * * Delvis. * ************************************************ **************************** / body font-size: 100%;  / *********************************************** ****************************** * * Delvis. * ************************************************ **************************** / body font-size: 100%;  

Løsningen

Vi skal løse ting ved å bruke et Grunt-plugin kalt grunt-replace. For detaljer om hvordan du kommer opp med Grunt, kan du se på følgende ressurser:

• 

  Kommandolinjen for webdesign: Automatisering med Grunt

  I denne opplæringen lærer du hvordan du konfigurerer oppgaveløpere, og i prosessen ser du også et eksempel på å få inn skript fra Bower-pakker for ...
• 

  Nytt kort kurs: Sette opp en pro-front-endrings-arbeidsflyt

  Ønsker du å sette opp en mer effektiv arbeidsflyt for din front-end-utvikling? Prøv vårt nyeste kurs, Sette opp en pro-front-endrings-arbeidsflyt. Du lærer ...

Vi laster grunt-erstatning, sammen med noen andre avhengigheter, i vår package.json-fil som vist i følgende utdrag:

 "devDependencies": "grunt": "^ 1.0.1", "grunt-erstatte": "^ 1.0.1", "grunt-sass": "^ 2.0.0", "load-grunt-oppgaver": "^ 3.5.2"

Deretter må vi i vår grunt.js-fil gjennomføre oppgaven:

 // Oppgave: erstatt. erstatt: css: options: usePrefix: false, patterns: [match: '/ ** /', erstatning: "], filer: ['css / styles.css': 'css / styles. css '// for enkel fil]

Kamp

Vi bruker erstatningsoppgaven etter vi har samlet vår Sass-fil (sjekk ut kildefilene for flere detaljer).

Legg merke til mønstre alternativ, som viser følgende:

match: '/ ** /', erstatning: "

Dette instruerer Grunt å gå gjennom kompilert fil, finne forekomster av / ** / og erstatt dem med en tom streng. Nå er alt vi trenger å gjøre, gå gjennom våre Sass partials, plasser disse / ** / kommentarer hvor vi egentlig vil ha hvite rom, og la Grunt gjøre resten:

/ ************************************************* ***************************** * * Delvis. * ************************************************ **************************** / body font-size: 100%;  / ** / / ** / / ** / / ** / / ** / / ** / / ** /

Konklusjon

Grunt-replace er en veldig nyttig oppgave for å finne vanlige strenger og erstatte dem med noe annet, når du kjører Grunt. I dette tilfellet er det det perfekte verktøyet for å forhindre at hvittrom blir fjernet fra vår kompilerte Sass. Hva annet vil du bruke det til?

Nyttige ressurser

• grynt-erstatter
• svelge-erstatter