css - 对变量参数 Sass mixin 进行数学运算

Question

我喜欢使用带有像素回退的 rem 单位来调整我的 CSS 大小，并且正在尝试制作 mixins 来帮助实现这一点。对于字体大小，这很简单:

@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

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

@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 将变量识别为数字，从而正确地对它们使用除法运算符？

此外，经过更多测试后，我意识到连接只发生在最后一个变量上。

Answer 1

试试这个:

padding: #{$padding / 10}rem;

在 SASS/SCSS 中连接使用 ruby​​ 语法，你混合了一个数学方程式和一个连接，这是一种变量类型混合，所以我对它不起作用并不感到惊讶。

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