Search code examples
sassweb-essentials

How to fix Web Essentials number precision issue with SASS?

Currently, Web Essentials for Visual Studio 2013 supports SASS compilation. When when I compile a SASS variable with more than 5 decimal places, that number gets trimmed.

SASS

.example{ 
    line-height: 1.428571429; 
}

becomes

CSS

.example { 
    line-height: 1.42857; 
}

This is especially an issue with Bootstrap 3, as they use the above example for line height in buttons. The trimmed output number results in different button height across browsers.

Is there a way to change the SASS number precision through Web Essentials? I've opened up a feature request with them if it is not available.

Solution

  • Inside your compilerconfig.json file in Visual Studio add the option:

    "options": {"precision": 10}