Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Sass
Webdesign

Da Sass a CSS: come conservare gli spazi vuoti durante il Compile

by
Difficulty:IntermediateLength:ShortLanguages:

Italian (Italiano) translation by Francesco Turlon (you can also view the original English article)

Avete mai desiderato mantenere la struttura visiva dei vostri file Sass quando compilate CSS, senza perdere alcuno spazio vuoto? In questo suggerimento rapido abbiamo intenzione di mostrarvi come fare!

Guardate il suggerimento rapido

Questo suggerimento rapido è per coloro tra voi che hanno bisogno di compilare Sass in forma "expanded". Se compilate in "compressed" o "minified" l'intera questione del fatto che ci siano spazi vuoti è irrilevante.

Problema

Immaginate di avere diversi parziali Sass formattati come quello sottostante, includendo le interruzioni di riga vuota nella parte inferiore:

Compilandole in circostanze normali vi darebbe qualcosa di simile:

Ma supponiamo che desideriate qualcosa di simile:

Soluzione

Risolveremo il problema utilizzando un plugin di Grunt chiamato grunt-replace. Per ulteriori informazioni su come installare e far funzionare Grunt, date un'occhiata alle seguenti risorse:

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

Quindi, nel nostro file grunt.js dobbiamo aggiungere la task:

Match

Applichiamo la task per la sostituzione dopo aver compilato il nostro file Sass (controllate i file sorgente per maggiori dettagli).

Notate l'opzione patterns, che mostra:

Questa istruzione comunica a Grunt di passare attraverso il file compilato, trovare istanze /**/ e sostituirle con una stringa vuota. Ora tutto quello che dobbiamo fare è passare attraverso i nostri parziali di Sass, inserire questi commenti /**/ ovunque vogliamo effettivamente gli spazi vuoti, e lasciare che Grunt faccia il resto:

Conclusione

Grunt-replace è una task davvero utile per trovare stringhe comuni da sostituire con qualcos'altro, ogni volta che eseguite Grunt. In questo caso è lo strumento perfetto per impedire che gli spazi vuoti vengano rimossi dal nostro Sass compilato. Per cos'altro lo usereste?

Risorse utili

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.