Question

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

Here是我确切问题的一个方面。

而且，为了进一步说明，请参阅我的代码：

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

编辑：添加了Outputed 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小提琴。

Sass @mixin断点仅处理移动/平板电脑样式

1 个答案: