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

提问于 2024-04-28T06:53:54+08:00

浏览次

13

当我尝试将变量用于字体速记属性的font-size和line-height部分时，Sass执行除法而不是用斜杠分隔这两个值 .

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

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

目前输出：

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

我怎么能告诉萨斯停止分裂？

2 回答

34
使用#{} interpolation表示法将变量视为字符串 . 由于Sass无法对字符串执行算术运算，因此将 / 视为字面斜杠而不是除法运算符：
```
@mixin test($fontsize, $lineheight) {
    font: #{$fontsize}/#{$lineheight} sans-serif;
}
```
回复于 2024-04-28T06:53:54+08:00
2
BoltClock的答案在大多数情况下都有效，但是如果变量 $fontsize 是一个函数，例如 $fontsize: rem-calc(10px) ，它将作为字符串输出 .

更加防弹的方法是插入斜线：
```
@mixin test($fontsize, $lineheight) {
    font: $fontsize #{"/"} $lineheight sans-serif;
}
```
回复于 2024-04-28T06:53:54+08:00

相关问题