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

Sass à CSS: comment conserver l'espace blanc sur la compilation

by
Difficulty:IntermediateLength:ShortLanguages:

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:

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

Mais disons que vous voulez vraiment ce qui suit:

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:

Nous chargeons grunt-replace, avec d'autres dépendances, dans notre fichier package.json tel qu'illustré dans l'extrait suivant:

Ensuite, dans notre fichier grunt.js, nous devons mettre en œuvre la tâche:

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:

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:

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

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.