grid - Susy 非モバイル ファースト

Question

Compass Susy を大きな幅からモバイルまで機能させる方法はありますか?

ファイルサイズを小さく保つためにモバイルを最初に理解していますが、レイアウトの観点からは、完全なデスクトップバージョンを構築し、ブレークポイントで幅を狭くするアイテムを削除するのが最善でしょうか?

何かご意見は？

Answer 1

はい、できます。レイアウトの前にコンテンツについて考えるようになるので、実際にはモバイルアップの建物のレイアウトを操作する方がはるかに簡単だと思います。絶対最小から始めて、必要に応じて各ステップで追加する方が良いプロセスだと思います。そうは言っても、スージーはあなたが好きなプロセスで動作します。メディアクエリには、min-widthsではなくmax-widthsを使用してください。

ミックスインは、次のat-breakpoint3つの部分からなる引数を受け入れます$min $layout $max。max-onlyを除いて、それらの任意の組み合わせを渡すことができます。最小幅を増やす代わりに最大幅を減らすだけで、モバイルファーストと同じように行います。スージーのデフォルトは、実際にはデスクトップファーストのアプローチ用に設定されています。ダウンするブレークポイントを追加するだけです！

.page {
  @include container;
  @include at-breakpoint(9 40em) { /* a 9-column grid with max-width of 40em */ }
  @include at-breakpoint(6 20em) { /* a 6-column grid with max-width of 20em */ }
}