French (Français) translation by New Lune (you can also view the original English article)
Vous avez toujours voulu conserver la structure visuelle de vos fichiers Sass, lorsque vous compilez vers CSS, sans perdre l'espace blanc? Dans ce conseil rapide, je vais vous montrer comment!
Regardez un conseil rapide
Ce conseil rapide est pour ceux d'entre vous qui ont besoin de compiler Sass dans une forme "élargie". Si vous compilez à "compressé" ou "minifié" alors toute la question de l'espace blanc n'est pas pertinente.
Le problème
Imaginez que vous avez plusieurs partitions Sass qui sont formatées comme celle-ci, y compris les sauts de ligne vides en bas:
/****************************************************************************** * * Partial. * *****************************************************************************/ body { font-size: 100%; }
Les compiler dans des circonstances normales vous donnerait quelque chose comme:
/****************************************************************************** * * Partial. * *****************************************************************************/ body { font-size: 100%; } /****************************************************************************** * * Partial. * *****************************************************************************/ body { font-size: 100%; } /****************************************************************************** * * Partial. * *****************************************************************************/ body { font-size: 100%; }
Mais disons que vous voulez vraiment ce qui suit:
/****************************************************************************** * * Partial. * *****************************************************************************/ body { font-size: 100%; } /****************************************************************************** * * Partial. * *****************************************************************************/ body { font-size: 100%; } /****************************************************************************** * * Partial. * *****************************************************************************/ body { font-size: 100%; }
La solution
Nous allons résoudre les choses en utilisant un plugin Grunt appelé grunt-replace. Pour plus de détails sur la façon de démarrer avec Grunt, regardez les ressources suivantes:
La ligne de commande pour la conception Web: Automation avec Grunt
Nouveau cours court: Configuration d'un flux de travail de développement avant-port avancé
Nous chargeons grunt-replace, avec d'autres dépendances, dans notre fichier package.json tel qu'illustré dans l'extrait 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 mettre en œuvre la tâche:
// Task: replace. replace: { css: { options: { usePrefix: false, patterns: [ { match: '/**/', replacement: '' } ] }, files: [ { 'css/styles.css': 'css/styles.css' // for single file } ] } }
Match
Nous appliquons la tâche de remplacement après avoir compilé notre fichier Sass (consultez les fichiers source pour plus de détails).
Notez l'option de patterns
, qui montre ce qui suit:
match: '/**/', replacement: ''
Cela demande à Grunt de parcourir le fichier compilé, de trouver des instances de /**/
et de les remplacer par une chaîne vide. Maintenant, tout ce que nous devons faire, c'est passer par nos partitions Sass, placer ces /**/
commentaires partout où nous voulons vraiment des espaces et laisser Grunt faire le reste:
/****************************************************************************** * * Partial. * *****************************************************************************/ body { font-size: 100%; } /**/ /**/ /**/ /**/ /**/ /**/ /**/
Conclusion
Grunt-replace est une tâche vraiment utile pour trouver des cordes 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 retirés de notre Sass compilé. Pour quoi autrement l'utiliseriez-vous?
Ressources utiles
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Update me weeklyEnvato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post