sass 中如何使用 calc 計算變量

問題描述

問題很簡單，在計算 vh 和 px 時，需要使用 calc() 函數

例如，設置一個容器高度：

height: calc(100vh - 60px);

然而在開發過程中，一些有特殊意義的數字還是儘可能賦給 sass 變量，便於其他文件可以共用，比如上面的 60px 是個底部導航欄的高度，這就很多地方可能用上了，設一個 $tabbar-height

然後改一下上面設置高度的語句：

height: calc(100vh - $tabbar-height);

結果發現瀏覽器並沒有正確解析：

解決方法

解決方法也很簡單，在 sass 手冊裏就有這一節 傳送門

我們只要將上方的語句改爲

height: calc(100vh - #{$tabbar-height});