How to force simplification and avoid interpolation in simple SASS calculation?

Question

From SASS docs:

You can also use 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)!

But when I try to compile that

$var: 10px;

span {
    top: calc(10px + $var); // without interpretation
    bottom: calc(10px + #{$var}); // with interpretation
}

I get this:

span {
  top: calc(10px + $var); // obviously wrong
  bottom: calc(10px + 10px);
}

If I understand docs correctly, top should have assigned value 20px. Without interpretation, calc should be called as internal SASS function and return value. Why it didn't happen? How do I calculate without interpretation?

Answer 1

OK, I figured it out myself. There are two things:

1. the example in documentation is wrong, you shouldn't write calc(10px + $var) but simply 10px + $var;
2. it must happen as an assigment to SASS variable and NOT as as assingment to CSS attribute.

So this is how it should be written in SASS:

$var: 10px;
$my_calc: 10px + $var;

span {
    up: #{$my_calc};
    top: calc(10px + $var);
    bottom: calc(10px + #{$var});
}

It will properly compile to:

span {
  up: 20px;
  top: calc(10px + $var);
  bottom: calc(10px + 10px);
}

Regarding values of top and bottom: they are correct. SASS treats calc(10px + $var) as raw string and simply copies it and treats calc(10px + #{$var}); as string with interpolated value which it interpolates and then writes to the resulting CSS.

So everything is OK but the SASS docs are misleading.