Question

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

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

将输出以下媒体查询：

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

我认为at-breakpoint mixin接受3个参数，即：min-width，lay-out和max-width。

但使用时：

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

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

Susy at-breakpoint max-width媒体查询

1 个答案: