1

max-width: 600pxミックスインを使用するメディア クエリを作成しようとしています@include at-breakpoint。

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

次のメディア クエリを出力します。

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

at-breakpointmixin は、最小幅、レイアウト、最大幅の 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;

私の質問はmax-width: 600px、Susy でメディア クエリを取得する正しい方法は何ですか?

4

1 に答える 1