CODEWITHSUNDEEP
csssasscompass-sass
crea8ive_mind
crea8ive_mind

Reputation: 53

Add string to variable scss @mixin

I'm working on my own mixin and I am having trouble printing out the string.

My code is

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

when I apply this to my style, I would want to just use numbers and not add the "px" after each number like so:

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

This would output to:

.somestyle {
    margin: 10 4 50 3;
}

Now when I add the "px" suffix to my code block, it looks like this:

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

I even tried:

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

All this does is add the "px" to the last value. So using the same example above, my output looks like:

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

How can I get "px" to be placed on each value?

Thanks in advance!

Upvotes: 4

Views: 3202

Answers (1)

Martin Turjak
Martin Turjak

Reputation: 21214

You can add the "px" in a @each loop. Something like this:

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

DEMO

Upvotes: 4

Related Questions