Sass @mixin 断点只处理 mobile/tablet 样式

Question

为了更好地理解 Sass mixin 的使用，我正在尝试学习将它们用于我的媒体查询断点，它似乎只在 37.5em 以上和以下处理它们。因此，如果您查看我在下面发布的 SCSS 代码，它将在视口上呈现 mobileonly(below 37.5em 的样式window) 和 phablet（视口 window 上以上 37.5em），但不适用于 laptop 或 desktop。当视口 window 被拉伸得更大时，它不会改变超过我声明的 $firefly 十六进制变量。根据 Chrome 开发工具，媒体查询似乎在工作，但 @media (min-width: 37.5em) 似乎仍在覆盖样式，因为我想要的样式在开发工具中被划掉了。因此，即使在全视口 window 大小下，@media (min-width: 37.5em) 也是唯一应用的样式。为什么会这样？

Here 是我确切问题的一个 jsfiddle。

并且，为了进一步说明，这是我的代码：

HTML:

<html>
  <head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="css/build/main.css">
  </head>
<body>
  <header>
  </header>
</body>
</html>

SCSS:

$azure: #f3f4f4;
$chateau-green: #2bb656;
$firefly: #364141;
$fern: #59cb59;
$pastel-green: #75dd66;
$pigment-green: #0ca750;

@mixin breakpoint($point) {
  @if $point == desktop {
    @media (min-width: 70em) { @content ; }
 }
  @else if $point == laptop {
    @media (min-width: 64em) { @content ; }
 }
   @else if $point == tablet {
    @media (min-width: 50em) { @content ; }
 }
  @else if $point == phablet {
    @media (min-width: 37.5em)  { @content ; }
 }
 @else if $point == mobileonly {
    @media (max-width: 37.5em)  { @content ; }

 }
}

header {
  height: 600px;
  width:100%;
  @include breakpoint(desktop) {
    background-color:$azure;
  }
  @include breakpoint(laptop) {
    background-color:$chateau-green;
  }
  @include breakpoint(phablet) {
    background-color:$firefly;
  }
  @include breakpoint(mobileonly) {
        background-color:$pastel-green;
    }
}

编辑：添加了输出 CSS:

header {
  height: 600px;
  width: 100%;
}
@media (min-width: 70em) {
  header {
    background-color: #f3f4f4;
  }
}
@media (min-width: 64em) {
  header {
    background-color: #2bb656;
  }
}
@media (min-width: 37.5em) {
  header {
    background-color: #364141;
  }
}
@media (max-width: 37.5em) {
  header {
    background-color: #75dd66;
  }
}

Answer 1

这里的问题是为 min-width: 37.5em 编写的样式会覆盖为 min-width: 64em 编写的样式，对于其他情况也是如此。为此，尝试同时设置 min-width 和 max-width，以便样式特定。

Here 是js fiddle.

Sass @mixin 断点只处理 mobile/tablet 样式

Sass @mixin breakpoints only processing mobile/tablet styles

html

sass

mixins

media-queries