Почему мои sass mixins не работают

Question

Я делаю sass mixin для работы с медиа-материалами, и я просто не могу заставить его работать в моем проекте. Даже когда я помещаю 'display:none;', он все еще показывает, что означает, что запрошенный медиа-запрос i не работает. Я что-то упускаю?

Фактически, когда я меняю @mixin mq($media) на @media only screen and (min-width: 0) and (max-width: 200px), он действительно работал должным образом. Кроме того, я также меняю $ wide-desktop: em-calc (1500); до $ wide-desktop: 1500, и он по-прежнему не работает должным образом.

Заранее спасибо.

Мой код выглядит следующим образом:

$s:em-calc(380); 
$ls:em-calc(492); 
$tablet:em-calc(584); 
$wide-tablet:em-calc(961); 
$desktop:em-calc(1025); 
$wide-desktop:em-calc(1500); 
$tabletUp: em-calc(900); 

@mixin mq($media) { 
    @if $media == s { 
    @media only screen and (min-width: $s) and (max-width: $ls - 1) { @content; } 
    } 
    @else if $media == ls { 
    @media only screen and (min-width: $ls) and (max-width: $tablet - 1) { @content; } 
    } 
    @else if $media == tablet { 
    @media only screen and (min-width: $tablet) and (max-width: $wide-tablet - 1) { @content; } 
    } 
    @else if $media == wide-tablet { 
    @media only screen and (min-width: $wide-tablet) and (max-width: $desktop - 1) { @content; } 
    } 
    @else if $media == desktop { 
    @media only screen and (min-width: $desktop) and (max-width: $wide-desktop - 1) { @content; } 
    } 
    @else if $media == wide-desktop { 
    @media only screen and (min-width: $wide-desktop) { @content; } 
    } 

    @else if $media == tabletUp { 
    @media only screen and (min-width: 0) and (max-width: $wide-desktop - 1) { @content; } 
    } 

} 

@include mq(s){ 

     #header2{ 
       height:95%!important; 
       #innerTop{margin-top:15%;display:none;} 
     } 

     .center section#move{height:5%!important;} 
     div.center{ 
       top:95%!important; 
     } 

     #innerTop{ 

      margin-top:22%!important; 
      h1{ 
       font-weight: 800;font-family:sans-serif;font-size: 3.4em!important;line-height: 63px;margin-top: 0;margin-left:0.5em; 
       margin-bottom: 20px;color: white;max-width:70%;line-height:1.2em; 
       span.h11{display:none;font-size:0.5em;} 
      } 
      p{ 
      font-size:1.1em;margin-left:1.5em;max-width:80%;margin-top:2em;margin-bottom:-1em; color:#e3e3e3; 
      } 

     } 

} 

Answer 1

Проблема связана с отсутствующей em-calc функции, генерируемой медиа-запрос, как этот

@media only screen and (min-width: em-calc(380)) and (max-width: em-calc(492) (-1)) 

Убедитесь, что функция существует, или использовать непосредственно em (на основе размера шрифта 16px)

$s: 23.750em; 
...