sass - SCSS mixin add percentage fails -

i have scss mixin below definition linear-gradient.

@mixin custom-background(   $color: $color,   $progress: 0 ) {   background: linear-gradient(to right, $color #{$progress}%, #9ec9db 0);   border: #10516c solid #9ec9db; } 

but on compiling gulp-sass breaks below error:

error: invalid css after "... #{$progress} %": expected expression (e.g. 1px, bold), ", $progress-" on line 15 of file.scss

nt(to right, $color #{$progress} %, #9ec9db 0); ------------------------------------------^

messageoriginal: invalid css after "... #{$progress} %": expected expression (e.g. 1px, bold), ", $color"

interpolation different purposes, creating selector string variable. not convert values. convert number percentages, multiply 100%.

@mixin custom-background(   $color: $color,   $progress: 0 ) {   background: linear-gradient(to right, $color $progress * 100%, #9ec9db 0);   border: #10516c solid #9ec9db; } 

it possible, want use 1% or 10000% instead (i don't know $progress input range).

also: hell $color: $color? according sass scope rules, doesn't make sense.