将字符串添加到变量 scss @mixin

Question

我正在使用自己的 mixin，但无法打印出字符串。

我的代码是

@mixin margin($val...) {
    margin: $val;
}

当我将它应用到我的风格时，我只想使用数字而不是像这样在每个数字后添加“px”：

.somestyle {
    @include margin(10,4,50,3);
}

这将输出到：

.somestyle {
    margin: 10 4 50 3;
}

现在，当我将“px”后缀添加到我的代码块时，它看起来像这样：

@mixin margin($val...) {
    margin: $val + px;
}

我什至尝试过：

@mixin margin($val...) {
    margin: #{$val}px;
}

这只是将“px”添加到最后一个值。所以使用上面相同的例子，我的输出看起来像：

.somestyle {
    margin: 10 4 50 3px;
}

如何将“px”放在每个值上？

提前致谢！

Answer 1

您可以在@each 循环中添加“px”。像这样的：

@mixin margin($val...) {
    $margin: ();
    @each $i in $val {
        $margin: append($margin, $i + px);
    }
    margin: $margin;
}

DEMO