Sass to CSS Come preservare gli spazi bianchi su Compile

Hai mai voluto mantenere la struttura visiva dei tuoi file Sass, quando compilavi i CSS, senza perdere nessuno degli spazi bianchi? In questo breve suggerimento ti mostrerò come!

Guarda il consiglio rapido

Questo suggerimento rapido è per quelli di voi che hanno bisogno di compilare Sass in una forma "espansa". Se si compila in "compresso" o "minificato", l'intera questione relativa all'essere spazio vuoto è irrilevante.

Il problema

Immagina di avere parecchie Sass partial formattate in questo modo, comprese le interruzioni di riga vuote nella parte inferiore:

/ ************************************************* ***************************** * * Parziale. * ************************************************* **************************** / body dimensione carattere: 100%;  

Compilarli in circostanze normali ti darebbe qualcosa del tipo:

/ ************************************************* ***************************** * * Parziale. * ************************************************* **************************** / body dimensione carattere: 100%;  / ************************************************ ****************************** * * Parziale. * ************************************************* **************************** / body dimensione carattere: 100%;  / ************************************************ ****************************** * * Parziale. * ************************************************* **************************** / body dimensione carattere: 100%;  

Ma diciamo che in realtà vuoi il seguente:

/ ************************************************* ***************************** * * Parziale. * ************************************************* **************************** / body dimensione carattere: 100%;  / ************************************************ ****************************** * * Parziale. * ************************************************* **************************** / body dimensione carattere: 100%;  / ************************************************ ****************************** * * Parziale. * ************************************************* **************************** / body dimensione carattere: 100%;  

La soluzione

Stiamo andando a risolvere le cose usando un plugin Grunt chiamato grunt-replace. Per i dettagli su come iniziare a lavorare con Grunt, dai un'occhiata alle seguenti risorse:

• 

  La linea di comando per il web design: Automation With Grunt

  In questo tutorial imparerai come configurare i task runner e, nel processo, vedrai anche un esempio di inserimento di script dai pacchetti di Bower per ...
• 

  Nuovo corso breve: impostazione di un flusso di lavoro di sviluppo front-end pro

  Vuoi creare un flusso di lavoro più efficiente per il tuo sviluppo front-end? Prova il nostro ultimo corso, impostando un flusso di lavoro di sviluppo front-end pro. Imparerai ...

Carichiamo grunt-replace, insieme ad altre dipendenze, nel nostro file package.json come mostrato nel seguente snippet:

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

Quindi, nel nostro file grunt.js dobbiamo implementare l'attività:

 // Task: sostituire. replace: css: options: usePrefix: false, patterns: [match: '/ ** /', replacement: "], files: ['css / styles.css': 'css / styles. css '// per singolo file]

Incontro

Applichiamo l'attività di sostituzione dopo abbiamo compilato il nostro file Sass (controlla i file sorgente per maggiori dettagli).

Notare il modelli opzione, che mostra quanto segue:

corrispondenza: "/ ** /", sostituzione: "

Questo ordina a Grunt di esaminare il file compilato, trovare istanze di / ** / e sostituirli ciascuno con una stringa vuota. Ora tutto ciò che dobbiamo fare è passare attraverso i nostri partial Sass, posizionarli / ** / commenti ovunque vogliamo effettivamente spazi bianchi, e lasciare che Grunt faccia il resto:

/ ************************************************* ***************************** * * Parziale. * ************************************************* **************************** / body dimensione carattere: 100%;  / ** / / ** / / ** / / ** / / ** / / ** / / ** /

Conclusione

Grunt-replace è un compito davvero utile per trovare stringhe comuni e sostituirle con qualcos'altro, ogni volta che esegui Grunt. In questo caso è lo strumento perfetto per evitare che gli spazi bianchi vengano strappati dal nostro Sass compilato. Per che altro lo useresti??

Risorse utili

• grugnito-replace
• gulp-replace