Question

而不是做这样的事情（显然效率低下）：

@mixin padding($top, $right, $bottom, $left) {

    $top: $top * $spacer;
    $right: $right * $spacer;
    $bottom: $bottom * $spacer;
    $left: $left * $spacer;

    $output: $top $right $bottom $left;

    padding: $output;

}

我可以做类似的事吗？

@mixin padding($top:"", $right:"", $bottom:"", $left:"") {

    $params: $top, $right, $bottom, $left;
    $output: "";

    @each $var in $params {
        $var: $var * $spacer;
        $output: $output + $var;
    }

    padding: $output;

}

Answer 1

是你可以=）

在这种情况下，您也可以跳过第一步并使用$params...作为参数（变量参数列表），然后您可以padding包含1,2,3或4个值。

@mixin padding($params...) {
    $output: ();
    @each $var in $params {
        $var: $var * $spacer;
        $output: join( $output, $var );
    }
    padding: $output;
}

如果您使用join函数而不是字符串连接，那么在打印输出时（将列表自动编译为CSS作为空格分隔元素）时，您不会遇到将值与空格分开的麻烦。

DEMO

如果你想确保将参数限制在4最大值，你可以做这样的事情而不是@each循环：

$n: length($params);
@for $i from 1 through if( $n < 4, $n , 4) {
    $var: nth($params,$i) * $spacer;
    $output: join( $output, $var );
}

DEMO

但是，如果你想坚持使用字符串和连接而不是列表，你需要在循环内的连接中使用额外的空格（例如$output + " " + $var），然后返回使用字符串插值$output或使用#{$output}的{{1}}。但是你最终会在字符串上附加一个额外的空间...并且需要应用一些额外的逻辑，以防你想要摆脱它。

Mixin将变量传递给每个/ For

1 个答案:

DEMO

DEMO