无法识别 Scss 混合

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;
        }
    }

但是，当我 save/process 文件时，出现以下错误："Error No mixin named break backtrace: ..//[...]"

当我检查 mixin.css 页面时，没有任何记录，所以我没有传递一些东西，我只是不知道是什么。

这是我的总体样式页面，以防万一，我也可能遗漏了一些东西：

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

Answer 1

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

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

或者

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

无法识别 Scss 混合

Scss Mixin Not Recognized

css

sass

media-queries

scss-lint