Search code examples
csssassbox-shadow

Default parameter for Sass @mixin


I can't seem to find an answer to this specific question on Stack Overflow anywhere.

I am using Compass and am building a @mixin for box-shadow/text-shadow.

I am wondering if it is possible to set a default parameter in Sass/SCSS?

Here is my current code:

@mixin outer-glow($color, $type) {
  @if $type == 'text' {
    @include text-shadow(0 0 2px #{$color});
    @include text-shadow(0 0 .125rem #{$color}); // 2px
  } @else {
    @include box-shadow(0 0 2px #{$color});
    @include box-shadow(0 0 .125rem #{$color}); // 2px
  }
}

I would like to use this @mixin and have it default to box-shadow if a $type is not declared:

// declaration
@include outer-glow($my-color);
// output
would compile to box-shadow

// declaration
@include outer-glow($my-color, text);
// output
would compile to text-shadow

Solution

  • I found this helpful post that answered my question.

    So I've edited my @mixin and now I am able to use it as I intended, with it defaulting to box-shadow if now parameter is assigned:

    @mixin outer-glow($color, $type: box) {
      @if $type == 'text' {
        @include text-shadow(0 0 2px #{$color});
        @include text-shadow(0 0 .125rem #{$color}); // 2px
      } @else {
        @include box-shadow(0 0 2px #{$color});
        @include box-shadow(0 0 .125rem #{$color}); // 2px
      }
    }