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