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

Question

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?

Calc doesnt return a value in your css. However, in your rendering of the calc function on the page, it renders out to the value you are looking for — Brad, Jun 22 '23 at 22:43

score 0 · Accepted Answer · answered Jun 23 '23 at 13:28

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

the example in documentation is wrong, you shouldn't write calc(10px + $var) but simply 10px + $var;
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.

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

1 Answers1