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!

Note: If you change any of these Gruntfile options and are already watching in Terminal, you’ll have to exit your Terminal session and regenerate your CSS files to reflect changes. Regenerate either by running grunt buildcss prior to watching, or by editing your .scss file after watching.