为什么我的 sass mixins 无法工作 [重复]答案

【问题标题】：Why my sass mixins fails to work [duplicate]为什么我的 sass mixins 无法工作 [重复]
【发布时间】：2016-04-09 07:02:38
【问题描述】：

我制作了一个 sass mixin 来做媒体查询，但我无法让它在我的项目中工作。即使我输入'display:none;'，它仍然显示，这意味着我编写的媒体查询不起作用。我错过了什么吗？

实际上当我将@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;
             }

        }

}

【问题讨论】：

您使用的是哪个版本的SASS？
@Mike Vranckx，我刚刚查了一下，它是 Sass 3.4.20，谢谢
你真的在你的项目中声明了em-calc函数吗？
不，我认为 sass 有这个功能。我几个月前曾经使用过它。那时它正在工作。
em-calc 是 Zurb 基金会的一部分，不是来自 SASS。包含该框架或直接将 em 值分配给您的变量

标签： css sass media-queries

【解决方案1】：

问题与缺少的 em-calc 函数有关，它会生成这样的媒体查询

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

确保该函数存在，或直接使用em 值（基于16px 基本字体大小）

$s: 23.750em;
...

【讨论】：