Calculations with params only work with interpolation

[baldvinhansson]

Just in case someone is battling this issue.

height: calc(100vh - $header-height);
will not work - however

height: calc(100vh - #{$header-height});
does work.

Not sure if this is a bug in WebOptimizer.Sass or if maybe I've been writing incorrect SCSS to this date. The syntax without interpolation worked fine in the WebCompiler VS extension but had to be changed when I started using WebOptimizer.

[HybridSolutions]

According to Sass documentation

You can also use [interpolation](https://sass-lang.com/documentation/interpolation) in a calculation. However, if you do, nothing in the parentheses that surround that interpolation will be simplified or type-checked, so it’s easy to end up with extra verbose or even invalid CSS. Rather than writing calc(10px + #{$var}), just write calc(10px + $var)!

you are correct. Are you getting an error?

[baldvinhansson]

Yes, assuming $var: 10px for instance. The code height: calc(100vh - $var); renders as height: calc(100vh - $var); instead of height: calc(100vh - 10px);