私はスージーを使用しています。
content-first アプローチの活用に失敗し、window-px-widths-first を使用することにしました
最初はグリッドに対してコンテンツ ファーストのアプローチを試みましたが、すぐにサイトがさまざまなデバイスで予期しない動作をすることに気付きました。タブレットレイアウトなどが必要な場所にモバイルレイアウトが表示されます。特定の画面幅（px値）に一致するように、Susy設定のem値を調整することになりました。コードが醜くなり、実際にはコンテンツファーストのアプローチを使用していないことに気付きました。
これは、この不完全なアプローチを使用して作成したサイトのホームページの静的なスナップショットと、そのコードのスナップショットです。
そこで、コンテンツ優先のアプローチを完全に破棄し、最初に px 値を使用することにしました。
コードを書く前に、グリッドの要件を策定しました
まず、さまざまなデバイスを画面サイズでグループ化しました。次に、これらのデバイス グループに最も適したブレークポイントの px 値を考え出しました。
Break- Layout Number of Common
points name columns usage
(px) (sample)
0 ┬
│
│ S 1 Smartphones-portrait, old phones
│
400 ┼
│ M 2 Smartphones-landscape
600 ┼
│ L 3 Tablets-portrait
800 ┼
│ XL 4 Tablets-landscape, netbooks
1000 ┼
│ XXL 5 Laptops, desktop computers
1200 ┼
↓
次の前提/要件があると思います。
Window-px-widths-first アプローチ (上記で説明)。
$container-style は流動的です。画面の幅が 2 つのブレークポイントの間のどこかにある場合、コンテナーの幅は、より大きなブレークポイントに一致するように自動的に調整されます。レイアウト内の列数は変更されず、下のブレークポイントに対応します。
最後のブレークポイントはコンテナの最大幅です。サイトはそれ以上伸びることはなく、代わりにガターが追加されます。
モバイルファースト。「S」レイアウトから始めて、画面が広くなるにつれて他のレイアウトでオーバーライドします。
よく考えた後、私のアプローチは次のコードに進化しました
(このコードは合成例です。実際のコードから抜粋し、いくつかの適応を行ったので、何かが欠けていたり、矛盾している可能性があります。)
<div id="header-wrapper">
<header id="header">
...
</header>
</div>
<div id="main-wrapper">
<div id="main">
<article id="content">...</article>
<aside id="sidebar">...</aside>
</div>
</div>
<div id="footer-wrapper">
<footer id="footer">
...
</footer>
</div>
/////////////
// Variables
/////////////
$development: true // This enables susy-grid-backgrounds and outlines
// Breakpoints
$bp-s-m: 400px
$bp-m-l: 600px
$bp-l-xl: 800px
$bp-xl-xxl: 1000px
$max-width: 1200px
// Columns
$cols-s: 1
$cols-m: 2
$cols-l: 3
$cols-xl: 4
$cols-xxl: 5
// Layouts
// $layout-s is not necessary due to a mobile-first approach
$layout-m: $bp-s-m $cols-m
$layout-l: $bp-m-l $cols-l
$layout-xl: $bp-l-xl $cols-xl
$layout-xxl: $bp-xl-xxl $cols-xxl
// Default grid settings
$total-columns: $cols-s
$column-width: 85%
$gutter-width: 100% - $column-width
$grid-padding: 1em
$container-width: 100%
$container-style: fluid
+border-box-sizing
/////////////
// Mixins
/////////////
// A couple of mixins to open the developer's third eye
=dev-outline
@if $development
outline: 1px solid red
=dev-grid-bg
+dev-outline
@if $development
+susy-grid-background
// A custom container declaration
=standard-container
+container // ← An actual line of Susy code, yay! :D
// This whole post is actualy an attempt to make use of it.
max-width: $max-width
+dev-grid-bg
+at-breakpoint($layout-m)
+set-container-width
+dev-grid-bg
+at-breakpoint($layout-l)
+set-container-width
+dev-grid-bg
+at-breakpoint($layout-xl)
+set-container-width
+dev-grid-bg
+at-breakpoint($layout-xxl)
+set-container-width
+dev-grid-bg
/////////////
// Backgrounds
/////////////
// The wrapper divs are necessary for screen-wide backgrounds
html
background: url('../images/main-background.png') // also repeat, color, this kind of stuff
#header-wrapper
background: url('../images/header-background.png')
#footer-wrapper
background: url('../images/footer-background.png')
/////////////
// Containers
/////////////
// Actually declared in separate SASS files
#header, #main, #footer
+my-container
/////////////
// Columns
/////////////
// An example of declaring columns
$cols-sidebar: 1
#sidebar-first
+dev-outline
+at-breakpoint($layout-l)
+span-columns($cols-sidebar, $cols-l)
+at-breakpoint($layout-xl)
+span-columns($cols-sidebar, $cols-xl)
+at-breakpoint($layout-xxl)
+span-columns($cols-sidebar, $cols-xxl)
#content
+dev-outline
+at-breakpoint($layout-l)
+span-columns($cols-l - $cols-sidebar omega, $cols-l)
+at-breakpoint($layout-xl)
+span-columns($cols-xl - $cols-sidebar omega, $cols-xl)
+at-breakpoint($layout-xxl)
+span-columns($cols-xxl - $cols-sidebar omega, $cols-xxl)
これは、このアプローチを使用して作成したサイトのホームページの静的なスナップショットと、そのコードのスナップショットです。
質問
window-px-widths-first アプローチに従うのは私の意図的な決定であり、次の質問に与えられます。content-first に対するあなたの議論に感謝しますが、私が間違っていると言うことにとどまらず、window-px-widths-first に固有の次の質問に答えてください。
私のアプローチは、Susy で window-px-widths-first を実行するエレガントな方法ですか、それとも醜いコードですか?
コードをより優雅にするにはどうすればよいですか?
すべてのコンテナーとすべての列に対して繰り返さなければならない多数のブレークポイント宣言が好きではありません。に複数のレイアウトを指定するという、あまり文書化されていない可能性を使用することしか考えられませんでした
+container。+set-container-widthしかし、すべてのメディア クエリ内で実行する唯一のコードではない限り、そのアイデアでさえオプションではありません。:(Susy で window-px-widths-first を使用する (および上記の要件を満たす) 推奨される方法は何ですか?
あなたが見つけた私のコードの欠点を明らかにしてください。私はSASSの初心者ですが、同じことをより効率的に行う方法を提案できると確信しています。