How to avoid wrong values in calc() rule inside a less file when minifying your CSS files?

The CSS calc rule helps you to do mathematical calculations in your CSS files. For example you could calculate the height of a div element based on a set of less or sass variables. But what happens to the mathematical expressions inside the calc rule when your code gets minified for production? The less engine will calculate the expression inside calc(…) during the minification process and thus calc will contain a wrong value.

The way to avoid this behavior when compiling your less files is to activate the strict math mode so that no mathematical calculations are made from less. Use the following less command when compiling your less files in node:

lessc –strict-math=on

If you use gulp or grunt for compiling your CSS file just add the property strictMath: true to the less plugin to enable the feature.