$variable doesn't work inside mixin in scss

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;