I have this mixin to handle a simple CSS3 linear gradient:
@mixin linear-gradient($from, $to, $dir: bottom, $dir-webkit: top, $ie-filters: false) { background-color: $to; background-image: -webkit-linear-gradient($dir-webkit, $from, $to); background-image: linear-gradient(to $dir, $from, $to); @if $ie-filters == true and $old-ie { filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($from)}', endColorstr='#{ie-hex-str($to)}'); } }
$dir
is short for 'direction'.
If I need to make $ie-filters
'true' and I don't need to change the $dir
/ $dir-webkit
default values I still need to redeclare them which obviously isn't very DRY and optimal, so I'd have to do this:
@include linear-gradient(#7a7a7a, #1a1a1a, bottom, top, true);
When I just want to do this:
@include linear-gradient(#7a7a7a, #1a1a1a, true);
How do I skip over arguments in this way when calling a mixin?
PS if you're wondering about the $dir-webkit
argument it's for Webkit as it still doesn't handle the new gradient syntax (see: http://generatedcontent.org/post/37949105556/updateyourcss3 -> New gradient syntax), the direction needs to be the opposite of the standard syntax.
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.
Keyword arguments: The arguments are used to include in mixins. These types of arguments, if named, can be passed in any order and their default values can be skipped.
Mixins accept arguments. This way you can pass variables to a mixin. Notice that the arguments are set as variables and then used as the values (color and width) of the border property.
Starting from SASS 3.1 you can pass named arguments to do that:
@include linear-gradient($from: #7a7a7a, $to: #1a1a1a, $ie-filters: true);
The rest will be default.
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