Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Skipping an optional argument in Sass mixin

Tags:

sass

mixins

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.

like image 237
Chris Pearce Avatar asked Jan 21 '13 09:01

Chris Pearce


People also ask

How do you pass arguments to mixin?

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.

Which arguments are used to include arguments in the mixins?

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.

Is mixin support an argument?

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.


1 Answers

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.

like image 89
markus Avatar answered Sep 25 '22 01:09

markus