calc() 使用sass变量计算出现的问题和解决

正常的calc():

.detailPage {
    width: 100%;
    min-height: calc(100vh - 50px);
    background-color: #f7f6f6;
}

本以为可以直接把具体像素换成scss，如下：

.detailPage {
    width: 100%;
    min-height: calc(100vh - $navbarHeight);
    background-color: #f7f6f6;
}

但是没有生效，调试后浏览器显示不识别，如图：

查阅后得知正确的写法应该是：

.detailPage {
    width: 100%;
    min-height: calc(100vh - #{$navbarHeight});
    background-color: #f7f6f6;
}

已成功( •̀ ω •́ )y