在 CSS 属性值中使用由斜杠分隔的变量时如何防止除法

Question

当我尝试对字体速记属性的字体大小和行高部分使用变量时，Sass 执行除法而不是用斜杠分隔两个值。

@mixin test($fontsize, $lineheight) { font: $fontsize/$lineheight sans-serif; }

#my-font { @include test(14px, 20px); }

当前输出：

#my-font { font: 0.7 sans-serif; }

我怎样才能告诉 Sass 停止做除法？

Answer 1

使用 #{} 插值将变量视为字符串的表示法。由于 Sass 无法对字符串执行算术运算，因此 / 被视为文字斜杠而不是除法运算符：

@mixin test($fontsize, $lineheight) {
    font: #{$fontsize}/#{$lineheight} sans-serif;
}

Answer 2

BoltClock 的答案在大多数情况下都有效，但是如果变量 $fontsize 是一个函数，例如 $fontsize: rem-calc(10px)，它将输出为字符串。

更安全的方法是插入斜线：

@mixin test($fontsize, $lineheight) {
    font: $fontsize #{"/"} $lineheight sans-serif;
}