When you’re extending an existing Sass-enabled template in your local environment, you may notice your fresh instance of the template doesn’t quite match up with the demo template. For example, your line-heights, column widths, and other dynamic measurements are just different enough to drive you mad. If you use your browser’s inspector to investigate, you’ll likely discover your dev environment is rounding your computed measurements to the default of five decimal places. This is a common hiccup with Bootstrap, for example, where a base line-height of 1.428571429 becomes 1.42857.

You can set this globally as an environment configuration option (i.e., in Ruby or Node), but if you’re using a watcher like Compass or Grunt, you gain per-project control. In Grunt, it’s as simple as an option in your Gruntfile.

In Terminal:

cd /path-to-your-local-site/

open Gruntfile.js

In Gruntfile.js via your editor of choice:

Add a new option within your Sass dev options. Don’t forget the comma between each option line!

module.exports = function(grunt) {
  grunt.initConfig({
    sass: {
        dev: {
            options: {
                style: 'expanded',
                precision: 8
            },

The grunt-contrib-sass module has a number of other cool options as well. Check them out on GitHub.