SASS mixin outputs function in compiled CSS

Question

My compiled CSS when viewed has a SASS function in it that was never compiled. This is presumably caused by the mixin I'm using to auto generate classes. I have no idea how to fix it.

SASS code:

$rsColors: (
    main: (
        base: #333030,
        lighter:#827a7a,
        light:#5a5555,
        dark:#0c0b0b,
        darker:#000000,
        red: #211010,
        accent:#999595,
        border: #666666
    ),
    link: (
        base: #c42727,
        lighter:#eb9999,
        light:#de5959,
        dark:#841a1a,
        darker:#440e0e,
        hover:#841a1a,
        bg:rgba(80, 80, 80, 0.8),
        bgHover: #cccccc
    )
}
@mixin modifiers($map, $attribute, $prefix: '-', $hover: 'false', $separator: '-',$base: 'base', $type: 'darken', $perc: '15%') {
  @each $key, $value in $map {
    &#{if($key != $base, #{$prefix}#{$key}, '')} {
      @if type-of($value) == 'map' {
        @include modifiers($value, $attribute, $separator, $hover);
      }
      @else {
        #{$attribute}: $value;
        @if $hover == 'true' {
          &:hover {
            $function: get-function($type);
            #{$attribute}: call($function,$value,$perc);
          }
        }
      }
    }
  }
}

.rsBg {
  @include modifiers($rsColors, 'background', $hover: 'true');
}

Compiled CSS (as viewed from style editor in Firefox inspector):

...
.rsBg-yellow-700 {
  background: #b7791f;
}
.rsBg-yellow-700:hover {
  background: darken(#b7791f, 15%);
} 
...

How can I fix the compiled CSS so it's rendered correctly? I figure the mixin is to blame since it's outputting what I'm telling it to. Why it's not compiling before being output to CSS?

Expected Output:

...
.rsBg-yellow-700 {
  background: #b7791f;
}
.rsBg-yellow-700:hover {
  background: #915300; //assuming 15% darken
} 
...

**Edit**
After some testing I have found I needed to add the ```get-function()``` method to get ```call()``` to work. However, no matter what I try I can not get the ```$perc``` variable in such a way as to not throw a "not a number" error. I can hard code percentages and it will compile without errors.. but I'd rather not have to do that.

Answer 1

The answer to this issue was the use of '' in the arguments. Specifically the $lightness variable (which was changed from the @perc variable). Once I removed the quotes and just let it hang there, everything compiled and worked fine.

I removed the $type variable and changed the function to scale_color as it seemed to fit better with what I wanted. I should probably change the argument variable to a different name so not to be confused with the scale_color() argument. A task for a different day though.

PLEASE NOTE: I am accepting @Arkellys answer because it set me on the right path to this answer, and I feel really weird about accepting my own answer. I just added this answer so if another comes along it might help. Thank you @Arkellys for your help!

The final mixin

@mixin modifiers($map, $attribute, $prefix: '-', $hover: 'false', $separator: '-',$base: 'base', $lightness: -15%) {
  @each $key, $color in $map {
    &#{if($key != $base, #{$prefix}#{$key}, '')} {
      @if type-of($color) == 'map' {
        @include modifiers($color, $attribute, $separator, $hover);
      }
      @else {
        #{$attribute}: $color;
        @if $hover == 'true' {
          &:hover {
            #{$attribute}: scale_color($color,$lightness: $lightness);
          }
        }
      }
    }
  }
}

.rsBg {
  @include modifiers($rsColors, 'background', $hover: 'true', $lightness: -20%);
}

Answer 2

The problem actually comes from the way you call the function and not the mixin. Instead of:

#{$attribute}: unquote(#{$type}($value, #{unquote($perc)}));

You should use the built-in function call() as below:

#{$attribute}: call($type, $value, $perc);

You also need to remove the quotation marks for the parameter $perc or you will get an error such as: $amount: "15%" is not a number for 'darken'. I tried to remove them with unquote() but it doesn't seem to work.