Creé un archivo 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; } }y luego traté de implementarlo en mi archivo css global
.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; } }aunque los archivos global y mixin son parte de las importaciones en mi archivo css principal
@import "globals"; @import "mixins"; @import "variables"; @import "headers";al final da error
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) {Creo que el problema podría ser que esté importando globals antes de importar mixins . Debido a esto, en el momento en que se llama a globals, no hay un mixin llamado breakpoint-down : aún no se ha definido. Para solucionarlo, es posible que solo necesite cambiar las importaciones
@import "mixins"; // First instead of second @import "globals"; @import "variables"; @import "headers";espero que esto haya ayudado :)