Susy：为给定的屏幕宽度（断点px值）创建网格，并且不知道单个列的宽度（非内容优先的方法） [英] Susy: Creating a grid for given screen widths (breakpoint px values) and not knowing the width of a single column (a non-content-first approach)
问题描述
我正在使用 Susy 。
起初，我尝试了内容优先方法应用于网格，但很快我发现我的网站在不同设备上的行为异常。它会在我想要平板电脑布局的地方显示移动布局，等等。最终我为它们调整了Susy设置的em值，以匹配某些屏幕宽度（px值）。代码变得丑陋，我意识到我实际上不再使用内容优先的方法。
At first i tried the content-first approach to grids, but soon i found my site behaving unexpectedly on different devices. It would display a mobile layout where i wanted a tablet layout, etc. I ended up adjusting em values of Susy settings for them to match certain screen widths (px values). The code got ugly and i realized that i wasn't actually using the content-first approach any more.
这里是一个我使用此错误方法创建的网站首页的静态快照及其代码。
所以我决定转储
首先，我按屏幕大小将不同的设备分组。然后我想出了最适合那些设备组的断点的px值：
First of all i grouped different devices by their screen size. Then i came up with px values for breakpoints that are the most appropriate for those device groups:
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 ┼
↓
我假设以下假设/要求：
I suppose the following assumptions/requirements:
-
Window-px-widths-first方法（描述
Window-px-widths-first approach (described above).
$容器样式是可变的。当屏幕宽度介于两个断点之间时，容器的宽度会自动调整以匹配较大的断点。布局中的列数保持不变，并且与较低的断点相对应。
$container-style is fluid. When screen width is somewhere in between two breakpoints, containers' widths are automatically adjust to match the larger breakpoint. The number of columns in the layout is not changed and corresponds to the lower breakpoint.
最后一个断点是容器的最大宽度。该网站不会进一步扩展，反而会增加多余的空间。
The last breakpoint is the containers' max-width. The site won't stretch further, it would have extra gutters instead.
移动优先。从 S布局开始，并随着屏幕变宽而用其他布局覆盖。
Mobile-first. Start with the "S" layout and override it with other layouts as the screen goes wider.
认为我的方法演变为以下代码
（此代码是一个综合示例。我从实际代码中摘录并进行了一些修改，因此可能会遗漏某些内容或
After a lot of thought my approach evolved to the following code
(This code is a synthetic example. I took excerpts from my actual code and made some adaptations, so it may miss something or have inconsistencies.)
<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的以下问题。
Following the window-px-widths-first approach is my deliberate decision and is a given to the following questions. I appreciate your arguments for content-first, but please do not confine yourself to stating that i'm wrong, please answer the following questions specific to window-px-widths-first.
我的方法是用Susy进行window-px-widths-first的一种优雅方法还是一段丑陋的代码？
Is my approach an elegant way of doing window-px-widths-first with Susy or it's an ugly piece of code?
如何我可以使我的代码更优美吗？
How can i make my code more graceful?
我不喜欢在每个容器和每一列重复的众多断点声明。我只能想到使用文献记载很少的可能性来为 + container 指定多个布局。但是只要 + set-container-width 不是我在每个媒体查询中所做的唯一代码，即使那样的想法也不可行。 ：（
I don't like those numerous at-breakpoint declarations that i have to repeat for every container and every column. I could only think of using a poorly documented possibility of specifying multiple layouts for +container. But as long as +set-container-width is not the only code i do within every media query, even that idea is not an option. :(
与Susy一起使用window-px-widths-first（并满足我上述要求）的推荐方法是什么？
What is the recommended way of going window-px-widths-first with Susy (and meeting the requirements i described above)?
请揭示我发现的代码的任何缺陷，我是SASS的新手，我敢肯定，您可以建议使用更有效的方法来做同样的事情。
Please reveal any shortcomings of my code you find. I'm novice in SASS and i'm sure you can suggest more efficient ways of doing the same stuff.
推荐答案
还不错，但是您可以清理一些东西。
Not bad, but a few things you could clean up.
首先进行设置，对于单列使用Susy毫无意义，因此您可以完全放下小网格，手工创建（只需填充）并获得更简洁的代码。如果您添加多列，则当前的设置就没有多大意义了：2列的比例为85％，装订线比例为15％？总计达到185％的宽度。 ，而不是数字本身，但是有点难看。我将其更改为例如 85px 和 15px 或 8.5em 和 1.5em 。您无论如何都要覆盖容器，这不应更改任何内容-更加明智。
First the settings. There's no point in using Susy for a single column, so you could drop your small grid entirely, create it by hand (just padding), and have cleaner code. Once you add multiple columns, your current settings don't make much sense. 2 columns at 85%, with a 15% gutter? That adds up to 185% width. It works, because Susy is actually more interested in the ratio between the numbers, than the numbers themselves, but it's a bit ugly. I would change it to e.g. 85px and 15px or 8.5em and 1.5em. Since you are overriding the container anyway, that shouldn't change anything - just a bit more sensible.
我要进行的另一项主要更改是删除所有set-column -width调用，因为您的宽度无论如何都是100％平滑覆盖。它要做的就是每次将宽度设置为100％。何必？有了这种方式，我想您可以通过断点的简单循环自动进行开发人员后台调用。
The other main change I would make is to drop all the set-column-width calls, since your width is a 100% fluid override anyway. All it's doing is setting a width of 100% every time. Why bother? With that out of the way, I imagine you could automate the dev-background calls with a simple loop through your breakpoints.
$layouts: $layout-m $layout-l $layout-xl $layout-xxl
@each $layout in $layouts
+at-breakpoint($layout)
+dev-grid-bg
创建一个快捷方式来更改不同断点处的列跨度对于您或我们来说都是很困难的，并会增加相当数量的输出膨胀，除非这实际上是您在每种尺寸下所做的 only 更改。您目前拥有的东西看起来不错。
Creating a shortcut to change column-spans at different breakpoints would be difficult on your end or ours, and would add a fair amount of output bloat unless that is really the only change you are making at each size. What you have currently looks good.
这篇关于Susy：为给定的屏幕宽度（断点px值）创建网格，并且不知道单个列的宽度（非内容优先的方法）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
