Variable argument is used to pass any number of arguments to mixin. It contains keyword arguments passed to the function or mixin. Keyword arguments passed to the mixin can be accessed using keywords($args) function which return values mapped to String.
The keyword arguments are used to include in mixins. It specifies that the named arguments can be passed in any order and the default value of arguments can be omitted.
@mixin, very similar to a function but the main difference between the two is that mixins output lines of Sass code that will compile directly into CSS styles, while functions return a value that can then become the value for a CSS property or become something that might be passed to another function or mixin.
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};
}
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
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.
I know its not exactly the answer you were searching for but you could pass "null"
as last argument when @include box-shadow
mixin, like this @include box-shadow(12px, 14px, 2px, green, null);
Now, if that argument is only one in that property than that property (and its (default) value) won't get compiled. If there are two or more args on that "line" only ones that you nulled won't get compiled (your case).
CSS output is exactly as you wanted it, but you have to write your null
s :)
@include box-shadow(12px, 14px, 2px, green, null);
// compiles to ...
-webkit-box-shadow: 12px 14px 2px green;
-moz-box-shadow: 12px 14px 2px green;
box-shadow: 12px 14px 2px green;
here is the solution i use, with notes below:
@mixin transition($trans...) {
@if length($trans) < 1 {
$trans: all .15s ease-out;
}
-moz-transition: $trans;
-ms-transition: $trans;
-webkit-transition: $trans;
transition: $trans;
}
.use-this {
@include transition;
}
.use-this-2 {
@include transition(all 1s ease-out, color 2s ease-in);
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With