Ever wanted to keep the visual structure of your Sass files, when you compile to CSS, without losing any of the whitespace? In this quick tip I’m going to show you how!

Watch Quick Tip

This quick tip is for those of you who need to compile Sass to an “expanded” form. If you compile to “compressed” or “minified” then the whole question of there being whitespace is irrelevant.

The Problem

Imagine you have several Sass partials which are formatted like this, including the empty line breaks at the bottom:

/******************************************************************************
 *
 * Partial.
 *
 *****************************************************************************/
body {
    font-size: 100%;
}

Compiling them under normal circumstances would give you something like:

/******************************************************************************
 *
 * Partial.
 *
 *****************************************************************************/
body {
    font-size: 100%;
}

/******************************************************************************
 *
 * Partial.
 *
 *****************************************************************************/
body {
    font-size: 100%;
}

/******************************************************************************
 *
 * Partial.
 *
 *****************************************************************************/
body {
    font-size: 100%;
}

But let’s say you actually want the following:

/******************************************************************************
 *
 * Partial.
 *
 *****************************************************************************/
body {
    font-size: 100%;
}






/******************************************************************************
 *
 * Partial.
 *
 *****************************************************************************/
body {
    font-size: 100%;
}






/******************************************************************************
 *
 * Partial.
 *
 *****************************************************************************/
body {
    font-size: 100%;
}

The Solution

We’re going to solve things by using a Grunt plugin called grunt-replace. For details on how to get up and running with Grunt, take a look at the following resources:

• The Command Line for Web Design: Automation With Grunt

  In this tutorial you’ll be learning how to setup task runners and, in the process, you’ll also see an example of bringing in scripts from Bower packages for...

• New Short Course: Setting Up a Pro Front-End Development Workflow

  Want to set up a more efficient workflow for your front-end development? Try our latest course, Setting Up a Pro Front-End Development Workflow. You'll learn...

We load grunt-replace, along with some other dependencies, in our package.json file as shown in the following snippet:

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

Then, in our grunt.js file we have to implement the task:

        // Task: replace.
        replace: {
            css: {
                options: {
                    usePrefix: false,
                    patterns: [
                        {
                            match: '/**/',
                            replacement: ''
                        }
                    ]
                },
                files: [
                    {
                        'css/styles.css': 'css/styles.css' // for single file
                    }
                ]
            }
        }

Match

We apply the replace task after we’ve compiled our Sass file (check out the source files for more details).

Notice the patterns option, which shows the following:

match: '/**/',
replacement: ''

This instructs Grunt to go through the compiled file, find instances of /**/ and replace them each with an empty string. Now all we need to do is go through our Sass partials, place these /**/ comments wherever we actually want whitespace, and let Grunt do the rest:

/******************************************************************************
 *
 * Partial.
 *
 *****************************************************************************/
body {
    font-size: 100%;
}
/**/
/**/
/**/
/**/
/**/
/**/
/**/

Conclusion

Grunt-replace is a really useful task for finding common strings and replacing them with something else, whenever your run Grunt. In this case it’s the perfect tool to prevent whitespace from being stripped out of our compiled Sass. What else would you use it for?

Useful Resources

• grunt-replace
• gulp-replace