Sass till CSS Hur man bevarar whitespace på kompilera

Har du någonsin velat hålla den visuella strukturen i dina Sass-filer, när du sammanställer till CSS, utan att förlora någon av blankutrymmena? I det här snabba tipset ska jag visa dig hur!

Titta på Snabbtips

Det här snabba tipset är för dig som behöver sammanställa Sass till en "utökad" form. Om du kompilerar till "komprimerad" eller "minifierad" så är hela frågan om att det finns blankutrymme irrelevant.

Problemet

Tänk dig att du har flera Sass-partiklar som formateras så här, inklusive de tomma radbrytningarna längst ner:

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

Att sammanställa dem under normala omständigheter skulle ge dig något liknande:

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

Men låt oss säga att du faktiskt vill ha följande:

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

Lösningen

Vi ska lösa saker genom att använda ett Grunt-plugin som heter grunt-replace. För detaljer om hur du går igång med Grunt, ta en titt på följande resurser:

• 

  Kommandoraden för webbdesign: Automatisering med Grunt

  I den här handledningen lär du dig hur du installerar uppgiftslöpare och i processen får du också se ett exempel på att ta in skript från Bower-paket för ...
• 

  Ny kort kurs: Konfigurera ett Pro Front-End Development Workflow

  Vill du skapa ett effektivare arbetsflöde för din utveckling i framkant? Prova vår senaste kurs, Ställa in en Pro Front-End Development Workflow. Du lär dig ...

Vi laddar grunt-ersätta, tillsammans med några andra beroenden, i vår package.json-fil som visas i följande kod:

 "devDependencies": "grunt": "^ 1.0.1", "grunt-ersätt": "^ 1.0.1", "grunt-sass": "^ 2.0.0", "load-grunt-tasks" "^ 3.5.2"

Då måste vi i vår grunt.js-fil genomföra uppgiften:

 // Uppgift: ersätt. ersätt: css: options: usePrefix: falskt, mönster: [match: '/ ** /', ersättning: "], filer: ['css / styles.css': 'css / styles. css '// för enstaka fil]

Match

Vi tillämpar ersättningsuppgiften efter vi har sammanställt vår Sass-fil (kolla källfilerna för mer information).

Lägg märke till mönster alternativ som visar följande:

match: '/ ** /', ersättning: "

Detta instruerar Grunt att gå igenom den sammanställda filen, hitta instanser av / ** / och ersätt dem med en tom sträng. Nu är allt vi behöver göra genom att gå igenom våra Sass partials, placera dessa / ** / kommentarer var vi egentligen vill ha blankutrymme och låt Grunt göra resten:

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

Slutsats

Grunt-replace är en väldigt användbar uppgift att hitta gemensamma strängar och ersätta dem med något annat, när du kör Grunt. I det här fallet är det det perfekta verktyget för att förhindra att blanksteg tas bort från vår sammanställda Sass. Vad mer skulle du använda det för?

Användbara resurser

• grunt-replace
• gulp-replace