calc()内でscssの変数を使ったら変数名がそのまま出力されてしまった

scssの変数って便利ですね。
その変数がコンパイル時に展開されず、変数名がそのまま出力されてしまいました。
こんな時。

$colorBlue: #0057ba;
$sWidth: 10px;
$dir: "/assets/img/";

.ao{
    color: $colorBlue;
    width: calc(100% - $sWidth);
    background: url($dir"bg.jpg");
}

↓そのまま文字列が出力されます。

.ao {
    color: #0057ba;
    width: calc(100% - $sWidth);
    background: url("/assets/img/" "bg.jpg");
}

なんでしょう？カッコ()の中とか、文字列連結とか、うまく展開してくれません。
そんな時は、

解決

#{変数}を使用する（インターポレーション）

#{変数}で意図通りに出力してくれます。

.ao{
    color: $colorBlue;
    width: calc(100% - #{$sWidth});
    background: url("#{$dir}bg.jpg");
}

“”ダブルクォーテーションの中でもちゃんと展開してくれますね。

.ao {
    color: #0057ba;
    width: calc(100% - 10px);
    background: url("/assets/img/bg.jpg");
}