Sass către CSS Cum să păstrați spațiul alb pe compilație

V-ați dorit vreodată să păstrați structura vizuală a fișierelor dvs. Sass, atunci când compilați în CSS, fără a pierde vreun spațiu alb? În acest sfat rapid vă voi arăta cum!

Vizionați Sfat rapid

Acest sfat rapid este pentru cei care trebuie să compună Sass într-o formă "extinsă". Dacă compilați la "comprimat" sau "minificat" atunci întreaga problemă a existenței spațiilor libere este irelevantă.

Problema

Imaginați-vă că aveți mai multe partiții Sass care sunt formatate astfel, inclusiv rupturile liniei goale în partea de jos:

/ ************************************************* ***************************** * * Parțial. * ************************************************* **************************** / corp font-size: 100%;  

Compilarea lor în condiții normale vă va oferi ceva de genul:

/ ************************************************* ***************************** * * Parțial. * ************************************************* **************************** / corp font-size: 100%;  / ***************************************************** ****************************** * * Parțial. * ************************************************* **************************** / corp font-size: 100%;  / ***************************************************** ****************************** * * Parțial. * ************************************************* **************************** / corp font-size: 100%;  

Dar să spunem că într-adevăr doriți următoarele:

/ ************************************************* ***************************** * * Parțial. * ************************************************* **************************** / corp font-size: 100%;  / ***************************************************** ****************************** * * Parțial. * ************************************************* **************************** / corp font-size: 100%;  / ***************************************************** ****************************** * * Parțial. * ************************************************* **************************** / corp font-size: 100%;  

Soluția

Vom rezolva lucrurile folosind un plugin Grunt numit grunt-replace. Pentru detalii despre cum să începeți și să rulați cu Grunt, aruncați o privire asupra următoarelor resurse:

• 

  Linia de comandă pentru Web Design: Automatizarea cu Grunt

  În acest tutorial veți învăța cum să configurați alergătorii de sarcini și, în acest proces, veți vedea, de asemenea, un exemplu de a aduce script-uri din pachetele Bower pentru ...
• 

  Un nou curs scurt: configurarea unui flux de lucru pentru dezvoltare front-end

  Doriți să configurați un flux de lucru mai eficient pentru dezvoltarea dvs. front-end? Încercați ultimul nostru curs, Setarea unui flux de lucru pentru dezvoltarea frontală. Veți învăța ...

Se încarcă grunt-replace, împreună cu alte dependențe, în fișierul package.json așa cum se arată în următorul fragment:

 "devdeependencies": "grunt": "^ 1.0.1", "grunt-replace": "^ 1.0.1", "grunt-sass": "^ 2.0.0" "^ 3.5.2"

Apoi, în fișierul grunt.js trebuie să implementăm sarcina:

 // Sarcina: înlocuiți. înlocuiți: css: opțiuni: usePrefix: false, modele: match: '/ ** /', înlocuire: '], fișiere: [' css / styles.css ':' css / styles. css '// pentru un singur fișier]

Meci

Aplicăm sarcina de înlocuire după ne-am compilat fișierul Sass (consultați fișierele sursă pentru mai multe detalii).

Observați modele , care arată următoarele:

meci: "/ ** /", înlocuire: "

Acest lucru îl instruiește pe Grunt să treacă prin fișierul compilat, să găsească instanțe / ** / și le înlocuiesc fiecare cu un șir gol. Acum trebuie doar să mergem prin partidele noastre Sass, să le punem pe acestea / ** / comentează oriunde vrem cu adevărat spațiile libere și lăsăm Grunt să facă restul:

/ ************************************************* ***************************** * * Parțial. * ************************************************* **************************** / corp font-size: 100%;  / ** / / ** / / ** / ** / / ** / / ** / / ** /

Concluzie

Grunt-replace este o sarcină foarte utilă pentru găsirea unor șiruri de caractere comune și înlocuirea lor cu altceva, ori de câte ori alerga Grunt. În acest caz, este instrumentul perfect pentru a împiedica eliminarea spațiilor libere din Sass compilate. Pentru ce altceva i-ai folosi?

Resurse utile

• groh-înlocuiți
• înghiți dintr-înlocui