css - Scss Mixin 无法识别

Question

刚接触 Scss/Sass

我正在尝试使用 mixin 来动态构建媒体查询。我这样做更多是为了测试稍后在特定的 module.scss 文件中传递变量，但我遇到了一个奇怪的错误。

这是我的混合代码：

@mixin breakPoint($length){
    @media (max-width: $length){
        @content;
    }
}

进入 mod 文件后，我正在尝试编写如下内容：

.header-fixedWidth
    {
        height: inherit;
        width: 853px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;

        @include breakPoint(916px)
        {
            width: 90vw;
        }
    }

但是，当我保存/处理文件时，出现以下错误：“错误 No mixin named break backtrace: ..//[...]”

当我检查 mixin.css 页面时，没有记录任何内容，所以我没有通过某些东西，我只是不知道是什么。

这是我的整体风格页面，以防万一，我也遗漏了一些东西：

@import "Mods/_base";
@import "Mods/_headerAndNav";
@import "Mods/_mainContent";
@import "Mods/_mixins";

Answer 1

使用任何mixin你需要确保你的 mixin 文件已经加载，所以如果你使用 mixin in _maincontent，给定你的整个 SASS 文件，它会给出一个错误，所以做这样的事情：

@import "Mods/base",
        "Mods/mixins",
        "Mods/headerAndNav",
        "Mods/mainContent";

或者

@import "Mods/mixins",
        "Mods/base",
        "Mods/headerAndNav",
        "Mods/mainContent";