SASS Media Query Mixin

Question

我正在尝试在this教程之后设置断点。当我只针对一个属性时，它们正常工作。当我尝试创建一个目标为两个（宽度和高度）的查询时，它只显示后者。我已经研究了我正在使用的Sass函数，它应该正确渲染，所以我不确定问题是什么。我在Ruby on Rails版本4.2.2上使用sass-rails。

感谢名单

$breakpoints: (
  'small'  : ( max-width:  20em ),
  'mobile' : ( min-width:  36.25em ),
  'tablet'  : ( min-width: 48em ),
  'desktop'  : ( min-width: 60em ),
  'wide'    : ( min-width: 75em ),
  'height'    : ( min-width: 75em ) and (min-height: 62.5em)  
);

@mixin media($name) {
  @if map-has-key($breakpoints, $name) {
    @media #{inspect(map-get($breakpoints, $name))} {
      @content;
    }
  }

  @else {
    @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
        + "Please make sure it is defined in `$breakpoints` map.";
  }
}

这是呈现的内容：

@media (min-height: 62.5em) {

}

Answer 1

通常，在将媒体查询存储在变量中或将值存储在键值对中时，它们应存储为字符串。查看这些网站Media Queries by David Walsh和Responsive Web Design in Sass by Mason Wendell

替换此行代码
'height' : ( min-width: 75em ) and (min-height: 62.5em)
与
'height' : "( min-width: 75em ) and (min-height: 62.5em)"

既然传递给mixin的值可以是 string 或 list ，那么mixin需要识别这些变化

@mixin media($name) {
  @if map-has-key($breakpoints, $name) {
    $value: map-get($breakpoints, $name);
    $query: if(type-of($value) == "string", $value, inspect($value));
    @media #{$query} {
      @content;
    }
  }
  @else {
    @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
        + "Please make sure it is defined in `$breakpoints` map.";
  }
}

$breakpoints: (
  'small'  : ( max-width:  20em ),
  'wide'    : "( min-width: 75em ) and (min-height: 62.5em) and (max-height: 100em)",
  'height'    : "( min-width: 75em ) and (min-height: 62.5em)"  
);

div.gta {
  @include media(wide) { ... }
}

div#mgs {
  @include media(height) { ... }
}

这将编译为以下CSS

@media (min-width: 75em) and (min-height: 62.5em) and (max-height: 100em) {
  div.gta { ... }
}

@media (min-width: 75em) and (min-height: 62.5em) {
  div#mgs { ... }
}

这将允许mixin用于任意数量的媒体查询

Answer 2

这是我想要定位多个媒体查询时使用的内容（显然将查询设置为您想要的内容）：

$size__site_content_width : 1024px;

/* Media Queries */
$media_queries : (
    'mobile'    : "only screen and (max-width: 667px)",
    'tablet'    : "only screen and (min-width: 668px) and (max-width: $size__site_content_width)",
    'desktop'   : "only screen and (min-width: ($size__site_content_width + 1))",
    'retina2'   : "only screen and (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi)",
    'retina3'   : "only screen and (-webkit-min-device-pixel-ratio: 3) and (min-resolution: 288dpi)",
    'landscape' : "screen and (orientation:landscape) ",    
    'portrait'  : "screen and (orientation:portrait) "
);

@mixin for_breakpoint($breakpoints) {
    $conditions : ();
    @each $breakpoint in $breakpoints {
      // If the key exists in the map
      @if map-has-key($media_queries, $breakpoint) {
        $conditions: append(
            $conditions,
            #{inspect(map-get($media_queries, $breakpoint))},
            comma
        );
      }
      @else {
        @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
        + "Please make sure it is defined in `$breakpoints` map.";
      }
    }

    @media #{$conditions} {
        @content;
    }

}

在我的scss中，我们就像这样：

#masthead {
    background: white;
    border-bottom:1px solid #eee;
    height: 90px;
    padding: 0 20px;
    @include for_breakpoint(mobile desktop) {
        height:70px;
        position:fixed;
        width:100%;
        top:0;
    }
}

并输出：

#masthead { 
  background: white;
  border-bottom: 1px solid #eee;
  height: 90px;
  padding: 0 20px;
}

@media only screen and (max-width: 667px), only screen and (min-width: 1025px) { 
  #masthead {
    height: 70px;
    position: fixed;
    width: 100%;
    top: 0;
  }
}