编译错误错误：没有名为 breakpoint-down 的 mixin答案

【问题标题】：Compilation Error Error: no mixin named breakpoint-down编译错误错误：没有名为 breakpoint-down 的 mixin
【发布时间】：2021-12-28 21:33:24
【问题描述】：

我创建了一个 mixin css 文件

//Breakpoint
@media (min-width: 64em) {
    //styles go here
}
//640px, 1024px, 1400px
$breakpoints-up: ("medium": "40em", "large": "64em", "xlarge": "87.5em");

// 639px, 1023px, 139px
$breakpoints-down: ("small": "39.9375em", "medium": "63.9375em", "large": "87.4375em");

@mixin breakpoint-up($size) {
    @media (min-width: map-get($breakpoints-up, $size)) {
        @content;
    }
}
@mixin breakpoint-down($size) {
    @media (max-width: map-get($breakpoints-down, $size)) {
        @content;
    }
}

然后我尝试在我的全局 css 文件中实现它

.hide-for-mobile {
    //Hide for tab and mobile
    @include breakpoint-down(medium) {
        display: none;
    }
}

.hide-for-desktop {
    //hide for desktop
    @include breakpoint-up(large) {
        display: none;
}
}

虽然 global 和 mixin 文件是我的主 css 文件中导入的一部分

@import "globals";
@import "mixins";
@import "variables";
@import "headers";

最后报错

Compilation Error
Error: no mixin named breakpoint-down
        on line 63 of sass/c:\Users\USER\Downloads\Project\app\scss\_globals.scss
        from line 1 of sass/c:\Users\USER\Downloads\Project\app\scss\style.scss
>>     @include breakpoint-down(medium) {

【问题讨论】：

标签： javascript html css mixins scss-mixins

【解决方案1】：

我认为问题可能是您在导入 mixins 之前导入了 globals。正因为如此，在调用 globals 时没有一个名为 breakpoint-down 的 mixin：它还没有被定义。要修复它，您可能只需要切换导入

@import "mixins"; // First instead of second
@import "globals";
@import "variables";
@import "headers";

希望这会有所帮助:)

【讨论】：

非常感谢。它有帮助。上帝保佑你。