43

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.

vsync
  • 118,978
  • 58
  • 307
  • 400
Chris Pearce
  • 607
  • 1
  • 10
  • 15
  • Did you try, passing null? – markus Jan 21 '13 at 09:50
  • Just tried that but it doesn't output any value when `null` is used: `@include linear-gradient(#f60, #c00, null, null, true);` compiles to: `background-image: -webkit-linear-gradient(, #ff6600, #cc0000); background-image: linear-gradient(to, #ff6600, #cc0000);` – Chris Pearce Jan 21 '13 at 10:30
  • try this http://bravedick.github.com/mooxins/ mixins. no ie filters, btw. – korywka Jan 23 '13 at 23:17

1 Answers1

68

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.

markus
  • 40,136
  • 23
  • 97
  • 142
  • `$from` and `$to` will never have defaults, but even if they did it still doesn't help when I want to skip an argument like I've described above. – Chris Pearce Jan 21 '13 at 11:07
  • 3
    What? I just showed you how it works, that was exactly what you asked. You want to skip over the 3rd and 4th argument and this is how it's done. – markus Jan 21 '13 at 11:11
  • 7
    Maybe you don't understand my answer. This is how you CALL the mixin with your values. You can ommit the two other parameters as long as you pass named arguments. – markus Jan 21 '13 at 12:06
  • 2
    Sorry mate, I stupidly misread `@include` for `@mixin` in your code snippet so I thought you were declaring defaults for `$from` and `$to` in the actual mixin. Been working in mixins all day so the brain is a bit frazzled. Anyway all works fine. Cheers. – Chris Pearce Jan 21 '13 at 12:31
  • Is there any other alternative, eg. like passing null or something?? Thx! – Adriana Hernández Mar 24 '22 at 21:01
  • 1
    @AdrianaHernández no. You can specifically code support logic inside your mixin, checking your parameters to be null and setting default values, but I would be careful to do that since it's non standard way to implement default valued parameters so it isn't going to be intuitive from the outside. – Áxel Costas Pena Jul 28 '22 at 14:18