Error in mixin in scss: no mixin named respond. even though the mixin is well defined .Why is this happening?

Question

i am having a weird issue in my scss code when using media query. When i try to call a mixin named 'respond', the error says no mixin named respond. the weird part is , it works when i copy paste the previously used same mixin 'respond'.why is this happening. its like some times there's error but othertime there is not.

here is my main.scss in which all the component scss are imported

@import "abstracts/mixins";
@import "abstracts/fucntions";
@import "abstracts/variables";

here is the _mixins.scss

@mixin clearfix {
    &::after {
       content: "";
       display: table;
       clear: both;
   }
}

@mixin repond($breakpoint) {

  @if $breakpoint == phone{
      @media (max-width:37.5em) {@content }; //600px
  }
  @if $breakpoint == tab-port{
     @media (max-width:56.25em) {@content };  //900px
  }
  @if $breakpoint == tab-land{
     @media (max-width:75em) {@content };   //1200px
  }
  @if $breakpoint == big-dektop{
     @media (min-width:112.5em) {@content };   //1800px
  }
}

here is the scss file _base.scss where i applied the mixin

body{
   box-sizing: border-box;
   padding:2rem;

   @include respond(tab-port){
       padding: 0;
   }
}

A help here is very much appreciated. thank you.

Answer 1

Unsure if it's that simple, but I see that in your snippet, the mixin is named 'repond' without the 's' and your call searches for 'respond' with an 's'.