2

私は最近いくつかのプロジェクトで Compass Susy を使用しましたが、数回試してみたところ、いくつか疑問が生じました。

ちなみに、ここではデスクトップ ファースト ワークフローとして開始しています。

これらのプロジェクトでは、デフォルトの列幅、ガターなどを設定しました。

10px のガターを持つ 90px の 12 列のグリッドがあるとします。

次に、モバイル用のメディア クエリに到達すると、たとえば 4 列のグリッドが必要だとすると、メディア レイアウトは次のようになります: $mobile: 4 480px

@include at-breakpoint($mobile) { // ここにスタイル }

私が本当に混乱しているのは、メディアのレイアウトを理解していないことです。メディア レイアウトで最小幅 480 ピクセルで 4 列が必要であると指定した場合、列の幅または必要なガター幅をどのように知るのでしょうか。デフォルトを使用していると思います。それはそれが使用するものですか？

これを回避するには、メディア クエリごとに、メディア クエリを設定し、列をスパンしてから、with-grid-settings mixin を使用して新しいグリッドを指定し、コンテナーを再インクルードする必要がありました。

スティックの端を間違っているだけかもしれません。Susy がどのように機能するのか、また Susy を適切に使用するにはどうすればよいのか、誰か説明してもらえますか?

ありがとう

4

1 に答える 1

4

あなたが正しい。at-breakpointすべてのサイズで完全に新しいグリッド設定を提供することを意図したものではなく、列の数を変更することだけを目的としています。with-grid-settingsはグリッド設定を変更するために使用する適切なツールであり、異なるサイズでグリッド設定を変更する必要がある場合は、2つがうまく連携します。

@include at-breakpoint($mobile) { 
  @include with-grid-settings(4,3em,2em,1em) { // styles here }
}

現在、そのための近道はありません。

于 2012-12-07T02:40:34.627 に答える