Making a Sass mixin with optional arguments
A DRY'r Way of Doing It
And, generally, a neat trick to remove the quotes.
@mixin box-shadow($top, $left, $blur, $color, $inset:"") {
-webkit-box-shadow: $top $left $blur $color #{$inset};
-moz-box-shadow: $top $left $blur $color #{$inset};
box-shadow: $top $left $blur $color #{$inset};
}
SASS Version 3+, you can use unquote()
:
@mixin box-shadow($top, $left, $blur, $color, $inset:"") {
-webkit-box-shadow: $top $left $blur $color unquote($inset);
-moz-box-shadow: $top $left $blur $color unquote($inset);
box-shadow: $top $left $blur $color unquote($inset);
}
Picked this up over here: pass a list to a mixin as a single argument with SASS
A so much better DRY way
is to pass $args...
to the @mixin
.
That way, no matter how many $args
you will pass.
In the @input
call, you can pass all args needed.
Like so:
@mixin box-shadow($args...) {
-webkit-box-shadow: $args;
-moz-box-shadow: $args;
box-shadow: $args;
}
And now you can reuse your box-shadow in every class you want by passing all needed args:
.my-box-shadow {
@include box-shadow(2px 2px 5px #555, inset 0 0 0);
}