我正在使用Susy。
我未能利用内容优先的方法，并决定先使用 window-px-widths-first
起初我尝试了内容优先的网格方法，但很快我发现我的网站在不同的设备上表现出意外。它会显示一个移动布局，我想要一个平板电脑布局等。我最终调整了 Susy 设置的 em 值，以匹配某些屏幕宽度（px 值）。代码变得丑陋，我意识到我实际上不再使用内容优先的方法。
这是我使用这种错误方法创建的网站主页的静态快照及其代码的快照。
所以我决定完全放弃内容优先的方法，首先使用 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 是流动的。当屏幕宽度介于两个断点之间时，容器的宽度会自动调整以匹配较大的断点。布局中的列数不变，对应下断点。
最后一个断点是容器的最大宽度。该网站不会进一步延伸，而是会有额外的排水沟。
移动优先。从“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 方法是我深思熟虑的决定，并且是针对以下问题的。我很欣赏您关于内容优先的论点，但请不要局限于说我错了，请回答以下特定于 window-px-widths-first 的问题。
我的方法是先使用 Susy 执行 window-px-widths-first 的一种优雅方式，还是一段丑陋的代码？
我怎样才能让我的代码更优雅？
我不喜欢那些必须为每个容器和每个列重复的大量断点声明。我只能考虑使用记录不充分的可能性来为
+container. 但只要+set-container-width不是我在每个媒体查询中执行的唯一代码，即使这个想法也不是一种选择。:(与 Susy 一起使用 window-px-widths-first 的推荐方法是什么（并满足我上面描述的要求）？
请揭示您发现的我的代码的任何缺点。我是 SASS 的新手，我相信您可以提出更有效的方法来做同样的事情。