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;
  }
}