将字符串添加到变量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