scss 中的 mixin 错误：没有名为 respond 的 mixin。即使 mixin 定义明确。为什么会这样？

Question

我在使用媒体查询时在我的 scss 代码中遇到了一个奇怪的问题。当我尝试调用名为 'respond' 的 mixin 时，错误提示没有名为 respond 的 mixin。奇怪的是，当我复制粘贴以前使用的相同 mixin 'respond' 时它起作用了。为什么会这样。好像有时有错误有时没有。

这是我的main.scss，其中导入了所有组件 scss

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

这里是 _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
  }
}

这是 scss 文件 _base.scss 我在其中应用了 mixin

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

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

非常感谢您的帮助。谢谢。

Answer 1

不确定是不是这么简单，但我看到在您的代码片段中，mixin 被命名为“repond”，没有“s” ' 并且您的呼叫搜索 'respond' 并带有 's'。

scss 中的 mixin 错误：没有名为 respond 的 mixin。即使 mixin 定义明确。为什么会这样？

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

html

css

sass

media-queries

scss-mixins