کار نکردن مدیا در sass

سلام من برای ریسپانسیو یک سکشن پروژه میخواستم با sass ریسپانسیو کنم یک mixin ساختم و همه چیز اوکی بود اما به یکباره اجرا نشد و توی اکثر مرورگرها هم کدم تست کردم و اجرا نمیشه در صورتی که مشکل کامپایل نداره

@mixin mediumquery {
    @media screen and(min-width: $m){
        flex-direction: column;
        gap: 0.4rem;
        width: 300px;
    }
}
#list-group{@include mediumquery()}
css output
@media screen and (min-width: 970px) {
  #list-group {
    flex-direction: column;
    gap: 0.4rem;
    width: 300px;
  }
}

و بعد اومدم با js تقریبا مشابه بالا برای هدر سایت انجام بدم اجرا شد

const mediaQuery = window.matchMedia('(min-width: 970px)');
//const article = document.getElementById("list-group");
mediaQuery.addEventListener('change',(e)=>{
  if (e.matches){ 
    document.getElementById("list-group").style.flexDirection = "row-reverse";
    console.log('less than 970px');
  }else{
    document.getElementById("list-group").style.flexDirection = "column";
    console.log('more than 970px');
  }
});

به نظرتون چه دلیلی داره که فایل js اجرا بشه ولی توی sass اجرا نمیشه ؟ راستی سوال دوم هم اینه چجوری با map و شرط ها توی sass بدون js برنامه بالا اجرا کنم ؟