Is it possible to overload mixins in sass?

Let say you have a mixin for shadow like such:

@mixin box-shadow($offset, $blur, $color)
{
   -moz-box-shadow: $offset $offset $blur $color;
   -webkit-box-shadow: $offset $offset $blur $color;
   box-shadow: $offset $offset $blur $color;
}

Is it possible to overload that mixin with something like:

@mixin box-shadow($offset, $blur)
{
    @include box-shadow($offset, $blur, #999);
}

Or do I have to use different names for the mixins?

Solution 1:

You can't overload, but the typical practice would be to set defaults.

 /* this would take color as an arg, or fall back to #999 on a 2 arg call */
 @mixin box-shadow($offset, $blur, $color: #999) {
   -webkit-box-shadow: $offset $offset $blur $color;
   -moz-box-shadow: $offset $offset $blur $color;
   box-shadow: $offset $offset $blur $color;
 }

Solution 2:

If you need to tweak a vendor mixin slightly you can copy it to another file - included after the original - and edit it in there, and the vendor's original will be ignored.

@import "_their-mixins";
@import "_our-mixins";

Warning - this may depend on which processor you are using. At time of writing it works great using grunt and grunt-contrib-compass

Solution 3:

@numbers1311407 solution is correct, but you can use the @each directive to create a shorter mixin:

@mixin box-shadow($offset, $blur, $color: #999) {
  @each $prefix in -moz-, -webkit-, null {
    #{$prefix}box-shadow: $offset $offset $blur $color;
  }
}