Only add unit on valid number - sass

Question

I'm trying to do a mixin that have optional arguments. This is a simplified version:
#mixin marginCalculator($size, $size2:"") {
margin: $size * 1px unquote($size2 * 1px);
}
I'm just passing in numbers as arguments. But i only want the first one to be mandatory. No problem if it only would output the number but i need to add a unit to it.
As can be seen in the snippet above i'm trying to multiplicate 1px with "" which ouputs an error message. As it should! But i was hoping for the empty quote to be returned. Is there another way to achieve this?

Answer 1

You have 2 options:
Check the type of the value being passed in
#mixin marginCalculator($size, $size2: "") {
margin: ($size * 1px) (if(type-of($size2) == number, $size2 * 1px, null));
}
Loop over a list
This is a much better solution since it will allow you to gracefully handle 3-value margins as well.
#mixin marginCalculator($size...) {
$xs: ();
#each $s in $size {
$xs: append($xs, $s * 1px);
}
margin: $xs;
}
.foo {
#include marginCalculator(1);
#include marginCalculator(1, 2);
#include marginCalculator(1, 2, 3);
}
Alternately:
#mixin marginCalculator($sizes) {
$xs: ();
#each $s in $size {
$xs: append($xs, $s * 1px);
}
margin: $xs;
}
.foo {
#include marginCalculator(1);
#include marginCalculator(1 2);
#include marginCalculator(1 2 3);
}
Output:
.foo .foo {
margin: 1px;
margin: 1px 2px;
margin: 1px 2px 3px;
}

Answer 2

You can use an if() function to check if it has no value:
#mixin marginCalculator($size, $size2:"") {
margin: ($size * 1px) if($size2!="", $size2 * 1px, null);
}
Here, i check it against the default, an empty string, and return the calculation if it isn't that, and null if it is. If we return an empty string, it'll cause a CSS error.