compass-sass - 苏西 : Creating a grid for given screen widths (breakpoint px values) and not knowing the width of a single column (a non-content-first approach)

Question

我正在使用 Susy .

我未能利用内容优先的方法，因此决定先使用 window-px-widths-first

起初我尝试了 content-first approach到网格，但很快我发现我的网站在不同的设备上表现异常。它会显示一个移动布局，我想要一个平板电脑布局等。我最终调整了 Susy 设置的 em 值，以匹配特定的屏幕宽度(px 值)。代码变得丑陋，我意识到我实际上不再使用内容优先方法了。

这是一个 static snapshot of the homepage我使用这种错误方法创建的网站及其快照 code .

所以我决定完全放弃内容优先的方法并首先使用 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 ┼
       ↓

我假设有以下假设/要求:

1. 窗口像素宽度优先方法(如上所述)。

2. $container 风格是流畅的。当屏幕宽度介于两个断点之间时，容器的宽度会自动调整以匹配较大的断点。布局中的列数不变，对应于下断点。

3. 最后一个断点是容器的最大宽度。该网站不会进一步延伸，而是会有额外的排水沟。

4. 移动优先。从“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)

这是一个static snapshot of the homepage我使用这种方法创建的网站和 snapshot of its code .

问题

1. 遵循 window-px-widths-first 方法是我深思熟虑的决定，并给出了以下问题。我感谢您对内容优先的论点，但请不要局限于声明我错了，请回答以下特定于 window-px-widths-first 的问题。

2. 我的方法是使用 Susy 进行 window-px-widths-first 的优雅方式还是一段丑陋的代码？

3. 如何让我的代码更优雅？

   我不喜欢那些我必须为每个容器和每一列重复的大量断点声明。我只能想到使用一个文档很少的可能性来为 +container 指定多个布局。但只要 +set-container-width 不是我在每个媒体查询中执行的唯一代码，即使是那个想法也不是一个选项。 :(

4. 在 Susy 中使用 window-px-widths-first 的推荐方法是什么(并满足我上面描述的要求)？

5. 请指出您发现的我的代码的任何缺点。我是 SASS 的新手，我相信你可以建议更有效的方法来做同样的事情。

Answer 1

还不错，但有一些您可以清理的地方。

首先是设置。对单个列使用 Susy 没有意义，因此您可以完全放弃您的小网格，手动创建它(只是填充)，并拥有更简洁的代码。添加多列后，您当前的设置就没有多大意义。 2 列占 85%，间距为 15%？这加起来达到 185% 的宽度。它有效，因为 Susy 实际上对数字之间的比率比数字本身更感兴趣，但它有点难看。我会把它改成例如85px 和 15px 或 8.5em 和 1.5em。由于您无论如何都在覆盖容器，所以这不应该改变任何东西 - 只是更明智一点。

我要做的另一个主要更改是放弃所有 set-column-width 调用，因为无论如何您的宽度都是 100% 流体覆盖。它所做的只是每次都将宽度设置为 100%。何必呢？解决了这个问题，我想您可以通过一个简单的断点循环来自动执行开发后台调用。

$layouts: $layout-m $layout-l $layout-xl $layout-xxl
@each $layout in $layouts
  +at-breakpoint($layout)
    +dev-grid-bg

创建一个快捷方式来更改不同断点处的列跨度对您或我们来说都很困难，并且会增加相当多的输出膨胀，除非那确实是您在 唯一 所做的更改每个尺寸。你目前拥有的看起来不错。