Css 为什么我的sass mixins不起作用

Css 为什么我的sass mixins不起作用,css,sass,media-queries,Css,Sass,Media Queries,我做了一个sass混音来做媒体查询的东西,但我就是不能让它在我的项目中工作。即使当我把“display:none;”,它仍然显示,这意味着我编码的媒体查询不起作用。我错过什么了吗 实际上,当我将@mixin mq($media)更改为 @仅介质屏幕和(最小宽度:0)和(最大宽度:200px),它按预期工作。 此外,我还改变了$wide桌面:em calc(1500);到$wide桌面:1500,但它仍然不能像预期的那样工作 提前谢谢 我的代码如下: $s:em-calc(380); $ls:em

我做了一个sass混音来做媒体查询的东西,但我就是不能让它在我的项目中工作。即使当我把
“display:none;”,它仍然显示,这意味着我编码的媒体查询不起作用。我错过什么了吗

实际上,当我将
@mixin mq($media)
更改为
@仅介质屏幕和(最小宽度:0)和(最大宽度:200px)
,它按预期工作。 此外,我还改变了$wide桌面:em calc(1500);到$wide桌面: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;
             }

        }

}

问题与生成媒体查询的缺少
em calc
函数有关

@media only screen and (min-width: em-calc(380)) and (max-width: em-calc(492) (-1))
确保函数存在,或直接使用
em
值(基于16px基本字体大小)


您使用的是哪个版本的
SASS
?@Mike Vranckx,我刚检查过,它是SASS 3.4.20,谢谢您在项目中的某个地方声明了
em calc
函数吗?不,我以为SASS有这个函数。我以前用它几个月。然后它工作。<代码> EM Calc < /代码>是ZURB基金会的一部分,而不是来自SASS。包括该框架或直接将
em
值分配给变量
$s: 23.750em;
...