我在用着Susy http://susy.oddbird.net/.
我未能利用内容优先的方法，并决定采用 window-px-widths-first
起初我尝试了内容优先的方法 http://adactio.com/journal/4523/到网格，但很快我发现我的网站在不同设备上的行为异常。它将显示一个移动布局，我想要一个平板电脑布局等。我最终调整了 Susy 设置的 em 值，以匹配某些屏幕宽度（px 值）。代码变得丑陋，我意识到我实际上不再使用内容优先的方法。
这是一个主页静态快照 http://files.alfamb.ru/stackoverflow_384y6ht/Stackoverflow%20Susy%20px%20values/1/我使用这种错误方法创建的网站及其快照code https://github.com/lolmaus/ruscup_aurora/tree/44120c5009074f3ccbc554c5817716aeef03d1e6.
所以我决定完全放弃内容优先的方法并首先使用 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)
这里有一个主页静态快照 http://files.alfamb.ru/stackoverflow_384y6ht/Stackoverflow%20Susy%20px%20values/2/我使用这种方法创建的网站的其代码快照 https://github.com/lolmaus/amt_boron/tree/ed384b0954a819b04463ab1228754c3671bf6275.
问题
遵循 window-px-widths-first 方法是我经过深思熟虑的决定，并且是针对以下问题的。我很欣赏您关于内容优先的论点，但请不要仅限于声明我错了，请回答以下特定于 window-px-widths-first 的问题。
我的方法是用 Susy 执行 window-px-widths-first 的优雅方法还是一段丑陋的代码？
-
如何让我的代码更加优雅？
我不喜欢那些必须对每个容器和每个列重复的大量断点声明。我只能想到使用记录很少的可能性来指定多个布局+container。但只要+set-container-width不是我在每个媒体查询中执行的唯一代码，即使这个想法不是一个选项。 :(
使用 Susy 进行 window-px-widths-first 的推荐方法是什么（并满足我上面描述的要求）？
请透露您发现的我的代码的任何缺点。我是 SASS 新手，我相信你可以建议更有效的方法来完成同样的事情。
