$variable doesn't work inside mixin in scss - css

Question

I am trying to add breakpoint in the mixin. And declare the breakpoint value in the variable like "$wp-breakpoints-xl: 1280;". But mixin doesn't take the variable. I have tried with interpolation like #{$wp-breakpoints-xl} but that is also not working for me. Mixin code is attached below. If anybody can help me that will be very helpful for me
#mixin wpp-breakpoint($class) {
#if $class == wp-sm
{
#media (min-width: $wp-breakpoints-m) { #content; }
}
#else if $class == wp-md
{
#media (min-width: $wp-breakpoints-l) { #content; }
}
#else if $class == wp-lg
{
#media (min-width: $wp-breakpoints-xl) { #content; }
}
#else if $class == wp-xs-only
{
#media (max-width: $wp-breakpoints-s) { #content; }
}
#else if $class == wp-sm-only
{
#media (min-width: $wp-breakpoints-m) and (max-width: $wp-breakpoints-l - 1) { #content; }
}
#else if $class == wp-md-only
{
#media (min-width: $wp-breakpoints-l) and (max-width: $wp-breakpoints-xl - 1) { #content; }
}
#else if $class == wp-mbltoipad-only
{
#media (max-width: $wp-breakpoints-l - 1) { #content; }
}
#else
{
#warn "Breakpoint mixin supports: wp-sm, wp-md, wp-lg, wp-xs-only, wp-sm-only, wp-md-only, wp-mbltoipad-only";
}
}
And variables are attached below
$wp-breakpoints-s: 749;
$wp-breakpoints-m: 750;
$wp-breakpoints-l: 1024;
$wp-breakpoints-xl: 1280;