Compilation Error Error: no mixin named breakpoint-down
Compilation Error Error: no mixin named breakpoint-down
我创建了一个 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;
}
}
尽管全局文件和混合文件是我主 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) {
我认为问题可能在于您在导入 mixins
之前导入了 globals
。因此,在调用 globals 时 不是 一个名为 breakpoint-down
的 mixin:它还没有被定义。要修复它,您可能只需要切换导入
@import "mixins"; // First instead of second
@import "globals";
@import "variables";
@import "headers";
希望这对您有所帮助:)
我创建了一个 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;
}
}
尽管全局文件和混合文件是我主 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) {
我认为问题可能在于您在导入 mixins
之前导入了 globals
。因此,在调用 globals 时 不是 一个名为 breakpoint-down
的 mixin:它还没有被定义。要修复它,您可能只需要切换导入
@import "mixins"; // First instead of second
@import "globals";
@import "variables";
@import "headers";
希望这对您有所帮助:)