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

CSS

小胖

2020-04-07

当我尝试使用字体速记属性的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; }

我如何告诉Sass停止分裂？

第4090篇《在CSS属性值中使用以斜杠分隔的变量时如何防止除法》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共2个回答

古一村村 2020.04.07

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

一种更防弹的方法是插入斜线：

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

JinJin 2020.04.07

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

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

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android