对变量参数 Sass mixins 进行数学运算

我喜欢使用带有像素后备的 rem 单位来调整 CSS 大小，并尝试制作 mixin 来帮助解决这个问题。对于字体大小，这很简单：

@mixin font-size($size) {
  font-size: $size + px;
  font-size: ($size / 10) + rem;
}

但是对于填充、边距等，mixin 需要接受变量参数，这根据 Sass 文档是可能的http://sass-lang.com/documentation/file.SASS_REFERENCE.html#variable_arguments http://sass-lang.com/documentation/file.SASS_REFERENCE.html#variable_arguments

然而，对于下面的 mixin，它只是在数字之间添加斜线，而不是除以 10。也就是说，这个：

@mixin padding($padding...) {
    padding: $padding + px;
    padding: ($padding / 10) + rem;
}
.class {
    @include padding(24);
}

输出这个：

.class {
    padding: 24px;
    padding: 24/10rem;
}

而不是像我期望的那样：

.class {
    padding: 24px;
    padding: 2.4rem;
}

有没有办法确保 Sass 将变量识别为数字，从而正确地对它们使用除法运算符？

另外，经过更多测试后，我意识到串联仅发生在最后一个变量上。

尝试这个：

padding: #{$padding / 10}rem;

SASS/SCSS 中的连接使用 ruby​​ 语法，并且您混合了一个数学方程，然后是一个连接，这是一种变量类型混合，所以它不起作用并不奇怪我。

#{here} 中包含的表达式和变量被评估为与该行的其余部分分开，因此不会对该行的其余部分进行类型转换。如果您的输出在您意想不到的情况下被引用（就像 unquote() 函数一样），也会派上用场