String interpolation works differently than in lib sass

[joneff]

The following yields different output in libsass and dartsass:

$em: 1.2em;
$px: 2px;
$calc: #{$em} + #{$px};

body {
  calc: calc( #{$calc} );
}

Expected result (libsass)

body {
  calc: calc( 1.2em + 2px);
}

Actual result (dartsass)

body {
  calc: calc( 1.2em2px );
}

[nex3]

LibSass's behavior is outdated. See this compatibility note, as well as sass/sass#1778 and sass/libsass#2714.

Practically, I recommend either storing the calc() wrapper in the variable itself ($calc: calc(#{$em} + #{$px})) or using the unquote() function ($calc: unquote("#{$em} + #{$px}")).