CSS 对可变参数 Sass mixins 进行数学运算
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19417081/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Doing math on variable argument Sass mixins
提问by Doug Hamlin
I like to use rem units with pixel fallbacks for my CSS sizing and am trying to make mixins to help with that. For font-size, this is easy:
我喜欢使用带有像素回退的 rem 单位来调整 CSS 大小，并且正在尝试使用 mixin 来帮助解决这个问题。对于字体大小，这很容易：
@mixin font-size($size) {
font-size: $size + px;
font-size: ($size / 10) + rem;
}
But for padding, margin, etc. the mixin needs to accept variable arguments, which is possible per the Sass documentation http://sass-lang.com/documentation/file.SASS_REFERENCE.html#variable_arguments
但是对于填充、边距等，mixin 需要接受可变参数，这可以根据 Sass 文档http://sass-lang.com/documentation/file.SASS_REFERENCE.html#variable_arguments
However, with the following mixin, instead of dividing by 10, the mixin is just adding a slash between the numbers. That is, this:
然而，对于下面的 mixin，不是除以 10，mixin 只是在数字之间添加一个斜线。也就是说，这个：
@mixin padding($padding...) {
padding: $padding + px;
padding: ($padding / 10) + rem;
}
.class {
@include padding(24);
}
Outputs this:
输出这个：
.class {
padding: 24px;
padding: 24/10rem;
}
Instead of this, like I would expect:
而不是这个，就像我期望的那样：
.class {
padding: 24px;
padding: 2.4rem;
}
Is there a way to make sure Sass recognizes the variables as numbers and thus uses the division operator on them correctly?
有没有办法确保 Sass 将变量识别为数字，从而正确地对它们使用除法运算符？
Also, after testing this more, I realized the concatenation only takes place on the last variable.
此外，在对此进行了更多测试之后，我意识到连接仅发生在最后一个变量上。
采纳答案by Doug Hamlin
It seems what I really needed to use here was a list rather than a variable argument in order to manipulate each value separately.
看来我真正需要在这里使用的是一个列表而不是一个变量参数，以便分别操作每个值。
I first tried doing this with the @each directive, but couldn't figure out how to use it inside a declaration. This throws an error:
我首先尝试使用 @each 指令执行此操作，但无法弄清楚如何在声明中使用它。这会引发错误：
@mixin padding($padding) {
padding: @each $value in $padding { $value + px };
padding: @each $value in $padding { ($value / 10) + rem };
}
So I ended up writing something much more verbose that handles each of the four possible cases separately (i.e. you pass 1, 2, 3 or 4 arguments). That looks like this and works as I wanted:
所以我最终写了一些更详细的东西来分别处理四种可能的情况（即你传递 1、2、3 或 4 个参数）。看起来像这样并且可以按我的意愿工作：
@mixin padding($padding) {
@if length($padding) == 1 {
padding: $padding+px;
padding: $padding/10+rem;
}
@if length($padding) == 2 {
padding: nth($padding, 1)+px nth($padding, 2)+px;
padding: nth($padding, 1)*0.1+rem nth($padding, 2)*0.1+rem;
}
@if length($padding) == 3 {
padding: nth($padding, 1)+px nth($padding, 2)+px nth($padding, 3)+px;
padding: nth($padding, 1)*0.1+rem nth($padding, 2)*0.1+rem nth($padding, 3)*0.1+rem;
}
@if length($padding) == 4 {
padding: nth($padding, 1)+px nth($padding, 2)+px nth($padding, 3)+px nth($padding, 4)+px;
padding: nth($padding, 1)*0.1+rem nth($padding, 2)*0.1+rem nth($padding, 3)*0.1+rem nth($padding, 4)*0.1+rem;
}
}
I made collection of rem mixins including this one as a Gist here https://gist.github.com/doughamlin/7103259
我在这里收集了 rem mixin，包括这个作为 Gist https://gist.github.com/doughamlin/7103259
回答by Owen C. Jones
Try this:
尝试这个：
padding: #{$padding / 10}rem;
Concatenating in SASS/SCSS uses ruby syntax, and you were mixing a mathematical equation followed by a concatenation, which is a variable type mix, so it's not suprising to me that it didn't work.
在 SASS/SCSS 中连接使用 ruby 语法，你混合了一个数学方程，然后是一个连接，这是一个变量类型的混合，所以它不起作用对我来说并不奇怪。
Expressions and variables included within #{here} are assesed as if seperate to the rest of the line, and thus don't typecast the rest of the line. Also comes in handy if your output is getting quoted when you didn't expect (as does the unquote() function)
#{here} 中包含的表达式和变量被评估为好像与行的其余部分分开，因此不会对行的其余部分进行类型转换。如果您的输出在您没想到时被引用（就像 unquote() 函数一样），也会派上用场
