Sass naar CSS Hoe witruimte op Compile te behouden

Ooit de visuele structuur van je Sass-bestanden willen behouden, wanneer je compileert naar CSS, zonder de witruimte te verliezen? In deze snelle tip laat ik je zien hoe!

Bekijk Quick Tip

Deze snelle tip is voor degenen onder u die Sass moeten compileren in een "uitgebreide" vorm. Als u compileert om te "comprimeren" of "verkleinen", dan is de hele vraag of er witruimte is, niet relevant.

Het probleem

Stel je voor dat je verschillende Sass-gedeelten hebt die op deze manier zijn opgemaakt, inclusief de lege regelonderbrekingen onderaan:

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

Als u ze onder normale omstandigheden compileert, krijgt u iets als:

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

Maar laten we zeggen dat je eigenlijk het volgende wilt:

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

De oplossing

We gaan dingen oplossen door een Grunt-plug-in genaamd grunt-replace te gebruiken. Bekijk de volgende bronnen voor meer informatie over hoe u kunt beginnen met Grunt:

• 

  De commandoregel voor webontwerp: automatisering met grunt

  In deze tutorial leer je hoe je taaklopers moet instellen en zie je ook een voorbeeld van het binnenhalen van scripts uit Bower-pakketten voor ...
• 

  Nieuwe korte cursus: een pro front-end ontwikkelingswerkstroom instellen

  Wilt u een efficiëntere workflow instellen voor uw front-end ontwikkeling? Probeer onze nieuwste cursus, een front-end ontwikkelingswerkstroom opzetten. Je zal leren…

We laden grunt-replace, samen met enkele andere afhankelijkheden, in ons package.json-bestand zoals in het volgende fragment wordt getoond:

 "devDependencies": "grunt": "^ 1.0.1", "grunt-replace": "^ 1.0.1", "grunt-sass": "^ 2.0.0", "load-grunt-taken": "^ 3.5.2"

Vervolgens moeten we in ons grunt.js-bestand de taak uitvoeren:

 // Taak: vervangen. replace: css: options: usePrefix: false, patterns: [match: '/ ** /', replacement: "], files: ['css / styles.css': 'css / styles. css '// voor één bestand]

Wedstrijd

We passen de vervangtaak toe na we hebben ons Sass-bestand gecompileerd (bekijk de bronbestanden voor meer details).

Let op de patronen optie, die het volgende laat zien:

match: '/ ** /', vervanging: "

Dit geeft Grunt de opdracht om het gecompileerde bestand te doorlopen en exemplaren te vinden / ** / en vervang ze elk met een lege string. Nu hoeven we alleen maar onze Sass-partialen te doorlopen, deze te plaatsen / ** / opmerkingen waar we eigenlijk witruimte willen, en laat Grunt de rest doen:

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

Conclusie

Grunt-replace is een erg nuttige taak om gemeenschappelijke strings te vinden en deze te vervangen door iets anders, wanneer je Grunt gebruikt. In dit geval is het de perfecte tool om te voorkomen dat witruimte uit onze gecompileerde Sass wordt verwijderd. Waar zou je het anders voor gebruiken??

Handige bronnen

• grunt-replace
• slok-vervang