sass 中如何使用 calc 计算变量

问题描述

问题很简单，在计算 vh 和 px 时，需要使用 calc() 函数

例如，设置一个容器高度：

height: calc(100vh - 60px);

然而在开发过程中，一些有特殊意义的数字还是尽可能赋给 sass 变量，便于其他文件可以共用，比如上面的 60px 是个底部导航栏的高度，这就很多地方可能用上了，设一个 $tabbar-height

然后改一下上面设置高度的语句：

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

结果发现浏览器并没有正确解析：

解决方法

解决方法也很简单，在 sass 手册里就有这一节 传送门

我们只要将上方的语句改为

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