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);
}
Sass supports @if
statements. (See the documentation.)
You could write your mixin like this:
@mixin box-shadow($top, $left, $blur, $color, $inset:"") {
@if $inset != "" {
-webkit-box-shadow:$top $left $blur $color $inset;
-moz-box-shadow:$top $left $blur $color $inset;
box-shadow:$top $left $blur $color $inset;
}
}
You can put the property with null as a default value and if you don't pass the parameter it will not be interpreted.
@mixin box-shadow($top, $left, $blur, $color, $inset:null) {
-webkit-box-shadow: $top $left $blur $color $inset;
-moz-box-shadow: $top $left $blur $color $inset;
box-shadow: $top $left $blur $color $inset;
}
This means you can write the include statement like this.
@include box-shadow($top, $left, $blur, $color);
Instead of writing it like this.
@include box-shadow($top, $left, $blur, $color, null);
As shown in the answer here
Old question, I know, but I think this is still relevant. Arguably, a clearer way of doing this is to use the unquote() function (which SASS has had since version 3.0.0):
@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);
}
This is roughly equivalent to Josh's answer, but I think the explicitly named function is less obfuscated than the string interpolation syntax.