断点Sass：或多个断点的查询

Question

我设置了几个断点：

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

我在断点docs中看到了

  

您还可以编写OR媒体查询，允许您编写多个   不同的基本或复合媒体查询，如果有的话，让它们适用   查询集匹配。

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

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

这可能吗？

Answer 1

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

试试这个。

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

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

Answer 2

指南针断点中没有OR查询，特别是@include breakpoint(($breakpoint-medium, $breakpoint-large))失败并显示：

  

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

如果确实需要，可以使用简单css @media规则的OR查询。

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