Susy 断点最大宽度媒体查询

Question

我正在尝试使用 @include at-breakpoint mixin 创建一个具有 max-width: 600px 的媒体查询。

.selector {
  @include at-breakpoint(4, 600px){
    // ...
  }
}

将输出以下媒体查询：

@media (min-width: 300px) {
  // ...
}

我的印象是at-breakpoint mixin 接受 3 个参数，即：最小宽度、布局和最大宽度。

但是当使用这个时：

.selector {
  @include at-breakpoint(1px, 4, 600px){
    // ...
  }
}

我得到以下编译错误：

Mixin at-breakpoint takes 2 arguments but 3 were passed

但是当我使用它时，我没有收到任何错误，即使$tablet-layout 传递了 3 个参数。

.selector {
  @include at-breakpoint($tablet-layout){
    // ...
  }    
}


$tablet-width:              600px;
$tablet-columns:             12;
$tablet-sidebar-columns:     4;

$desktop-width:              780px;
$desktop-columns:            12;
$desktop-sidebar-columns:   4;

$tablet-layout:       $tablet-width $tablet-columns $desktop-width;
$desktop-layout:      $desktop-width $desktop-columns $tablet-width;

所以我的问题是：在 Susy 中获取 max-width: 600px 媒体查询的正确方法是什么？

Answer 1

你有正确的想法，但你需要在没有逗号的情况下这样做：

@include at-breakpoint(4 600px); // max-width: 600px;
@include at-breakpoint(1px 4 600px) // min-width: 1px; max-width: 4px;

这就是您的其他组合变量起作用的原因 - 它们都作为单个列表参数传递。