Sass to CSS Comment préserver les espaces sur la compilation

Vous avez toujours voulu conserver la structure visuelle de vos fichiers Sass, lorsque vous compilez en CSS, sans rien perdre de l'espace? Dans cette astuce, je vais vous montrer comment!

Regarder le conseil rapide

Cette astuce rapide s'adresse à ceux d'entre vous qui ont besoin de compiler Sass sous une forme «développée». Si vous compilez en "compressé" ou "minifié", alors toute la question de l'existence d'espaces n'est pas pertinente.

Le problème

Imaginez que vous avez plusieurs partiels Sass qui sont formatés comme ceci, y compris les sauts de ligne vides en bas:

/ ************************************************* ***************************** * * Partiel. * ************************************************ ***************************** / body taille de police: 100%;  

Les compiler dans des circonstances normales vous donnerait quelque chose comme:

/ ************************************************* ***************************** * * Partiel. * ************************************************ ***************************** / body taille de police: 100%;  / *********************************************** ****************************** * * Partiel. * ************************************************ ***************************** / body taille de police: 100%;  / *********************************************** ****************************** * * Partiel. * ************************************************ ***************************** / body taille de police: 100%;  

Mais disons que vous voulez réellement ce qui suit:

/ ************************************************* ***************************** * * Partiel. * ************************************************ ***************************** / body taille de police: 100%;  / *********************************************** ****************************** * * Partiel. * ************************************************ ***************************** / body taille de police: 100%;  / *********************************************** ****************************** * * Partiel. * ************************************************ ***************************** / body taille de police: 100%;  

La solution

Nous allons résoudre les problèmes en utilisant un plugin Grunt appelé grunt-replace. Pour plus d'informations sur l'utilisation de Grunt, consultez les ressources suivantes:

• 

  La ligne de commande pour la conception Web: Automation With Grunt

  Dans ce didacticiel, vous apprendrez à configurer des coureurs de tâches. Vous verrez également un exemple de saisie de scripts à partir de packages Bower pour…
• 

  Nouveau cours abrégé: Configuration d'un flux de travaux de développement professionnel front-end

  Vous souhaitez mettre en place un flux de travail plus efficace pour votre développement front-end? Essayez notre dernier cours, Configuration d’un workflow de développement frontal professionnel. Vous apprendrez…

Nous chargeons grunt-replace, ainsi que d'autres dépendances, dans notre fichier package.json, comme indiqué dans l'extrait de code suivant:

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

Ensuite, dans notre fichier grunt.js, nous devons implémenter la tâche:

 // tâche: remplacer. remplace: css: options: usePrefix: false, patterns: [match: '/ ** /', replacement: "], fichiers: ['css / styles.css': 'css / styles. CSS '// pour fichier unique]

Rencontre

Nous appliquons la tâche de remplacement après nous avons compilé notre fichier Sass (consultez les fichiers source pour plus de détails).

Remarquez le les patrons option, qui montre ce qui suit:

match: '/ ** /', remplacement: "

Ceci indique à Grunt de parcourir le fichier compilé, de rechercher des instances de / ** / et remplacez-les chacun par une chaîne vide. Maintenant, tout ce que nous avons à faire est de passer par nos partiels Sass, placez-les / ** / commente où nous voulons réellement des espaces et laissez Grunt faire le reste:

/ ************************************************* ***************************** * * Partiel. * ************************************************ ***************************** / body taille de police: 100%;  / ** / / ** / / ** / / ** / / ** / / ** / / ** /

Conclusion

Grunt-replace est une tâche vraiment utile pour trouver des chaînes communes et les remplacer par quelque chose d'autre, à chaque fois que vous exécutez Grunt. Dans ce cas, c’est l’outil idéal pour éviter que les espaces blancs ne soient supprimés de notre Sass compilé. Pour quoi d'autre l'utiliseriez-vous??

Ressources utiles

• grunt-remplacer
• gulp-replace