解決在sass中使用calc不能包含變量的問題。

今天寫sass的時候，發現在sass中使用calc，如果calc中包含一個變量，不會產生效果，看代碼：

.app-inner {
    display: flex;
    height: calc(100% - $topbar-height);
}

在瀏覽器中沒有產生效果：

可以看到sass並沒有解析這個$topbar-height。

最后在github的issue中找到了方法，要想在sass的calc中使用變量，必須對這個變量使用sass的插值方法(#{$variable})。

所以把代碼改正下面的形式就可以了：

.app-inner {
    display: flex;
    height: calc(100% - #{$topbar-height});
}

在瀏覽器中可以看到這個變量被解析了：

 

issue地址: https://github.com/sass/sass/issues/2166#issuecomment-254511098