media-queries - Breakpoint Sass：或查询多个断点

Question

我设置了几个断点：

$breakpoint-tiny : 0 767px;
$breakpoint-small : 768px 991px ;
$breakpoint-medium : 992px 1229px;
$breakpoint-large : 1230px;

我在断点文档中看到

您还可以编写 OR 媒体查询，允许您编写多个不同的基本或复合媒体查询，并在任何一组查询匹配时应用它们。

我想做的是在我的代码中需要时使用这些或查询来定位多个断点。例如：

@include breakpoint($breakpoint-medium, $breakpoint-large){
   .mobile-navigation{display: none;}
}

这可能吗？

score 7 · Accepted Answer

您应该传递一个参数（一个列表），而不是两个。

尝试这个。

@include breakpoint(($breakpoint-medium, $breakpoint-large)) {
    .mobile-navigation{display: none;}
}

我已经用括号包裹了你的逗号分隔变量。现在 Sass 会将它们视为一个列表，而不是两个参数。

score 1 · Accepted Answer

罗盘断点中没有 OR 查询，特别是@include breakpoint(($breakpoint-medium, $breakpoint-large))失败：

警告：响应式上下文不适用于or查询，因为要使用的查询不明确。请仅使用单一上下文查询。使用默认上下文。

@media如果你真的需要它，你可以使用带有纯 CSS 规则的 OR 查询。

正确的解决方案是不为断点指定最大宽度，只指定最小宽度。然后开始编写没有断点的网站（“移动优先”）。如果布局需要在某个宽度处更改，请@include breakpoint($brk)更改所有宽度大于$brk. 这样，您就不必指定媒体查询适用的间隔列表。

2 回答 2