Scss Mixin Not Recognized

Question

New to Scss/Sass

I am attempting to use a mixin to structure a media query on the fly. I am doing this more as a test to pass the variable later in the particular module.scss file, but I am getting a strange error.

Here is my mixin code:

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

Once in the mod file, I am attempting to write something like the following:

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

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

But, when I save/process the file, I get the following error: "Error No mixin named break backtrace: ..//[...]"

When I check the mixin.css page, nothing is being logged, so I am failing to pass something, I just don't know what.

Here is my overall style page, in case, perhaps, I am missing something there as well:

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

Answer 1

to use any mixin you need to make sure that your mixin files are already loaded , so if you use a mixin in _maincontent, given your overall SASS file, it will give an error, so do something like this:

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

Or

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