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

  Dans ce tutoriel, vous apprendrez à configurer les tâches et, dans le processus, vous verrez également un exemple d'introduction de scripts à partir des paquets Bower pour...

• Nouveau cours court: Configuration d'un flux de travail de développement avant-port avancé

  Voulez-vous créer un flux de travail plus efficace pour votre développement de front-end? Essayez notre dernier cours, la mise en place d'un flux de travail de développement avant-port avancé. Vous apprendrez...

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

• grunt-replace
• gulp-replace