Sass数学运算符具有函数

Question

我有这个功能：

@function toRem($val){
    @return #{$val / $fontSize}rem;
}

还有这个属性，但编译得很糟糕：

top: 3.5rem + toRem(15); --> 3.5rem0.9375rem (compiled)

我也试过这个，但也不起作用，结果是一样的：

top: #{$headerHeight + toRem(15)};

但如果我删除了它的功能：

top: 3.5rem + 0.9375rem; --> 4.4375rem

不可能这样做，或者我做错了什么？无法在数学运算符中找到有关函数的任何信息：S

提前致谢！

Answer 1

在SASS中，#{}用于interpolation。

在您的情况下，围绕变量的插值语法是您看到结果值如下所示连接的原因：3.5rem0.9375。

要解决此问题，您可以像往常一样评估数学表达式，无需插值，然后添加0rem以将数字强制转换为rem单位：

@function toRem($val){
  @return ($val / $fontSize) + 0rem;
}

使用示例：

$fontSize: 16;

@function toRem($val){
  @return ($val / $fontSize) + 0rem;
}

element {
  top: toRem(32);
  left: 3.5rem + toRem(15);
}

输出：

element {
  top: 2rem;
  left: 4.4375rem;
}