css - 将字符串添加到变量 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”放在每个值上？

提前致谢！

score 3 · Accepted Answer

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

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

1 回答 1