sass 中处理 calc() 函数中遇到的坑

[jackPanyj]

虽然 calc() 的兼容性并不好， 用起来真心强大

不过在 sass 中计算 函数 变量 等有一些坑， 比如：

  $font-30: 30px;
  h1 {
    font-size: calc(100px - $font-30)
  }

在上例中，sass 是无法正确的编译的， 它的输出是这样的：

$font-30: 30px;
h1 {
  font-size: calc(100px - $font-30)
}

解决方案：

$font-30: 30px;
h1 {
  font-size: calc(100px - #{$font-30})
}

这样就可以得到我们预期的输出了。

同样的情况也适应于函数， 比如

  @function r($px) {
    @return $px / 32 + rem;
  }
  h1 {
    font-size: calc(#{r(100)} - #{r(40)})
  }

测试demo