如何在CSS属性值中使用由斜杠分隔的变量时防止分割 [英] How to prevent division when using variables separated by a slash in CSS property values

问题描述

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

When I try to use variables for the font-size and line-height portion of the font shorthand property, Sass performs division instead of separating the two values with a slash.

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

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

目前输出：

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

如何告诉Sass停止分割？

How can I tell Sass to stop doing division?

推荐答案

使用 ＃{} 插值符号将变量视为字符串。由于Sass不能对字符串执行算术，因此 / 被视为字面斜杠而不是除法运算符：

Use the #{} interpolation notation to treat your variables as strings. Since Sass cannot perform arithmetic on strings, the / gets treated as a literal slash instead of the division operator:

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

这篇关于如何在CSS属性值中使用由斜杠分隔的变量时防止分割的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！