Susy:为给定的屏幕宽度(断点px值)创建一个网格,而不知道单个列的宽度(非内容优先方法)

Question

我正在使用Susy.

我没有利用内容优先的方法,并决定首先使用window-px-widths

起初我尝试了内容优先的网格方法,但很快我发现我的网站在不同的设备上出现意外行为.它会显示一个移动布局,我想要一个平板电脑布局等.我最终调整了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 ?
       ?

我想以下假设/要求:

1. Window-px-widths-first方法(如上所述).

2. $ container-style是流动的.当屏幕宽度介于两个断点之间时,容器的宽度会自动调整以匹配较大的断点.布局中的列数不会更改,并且对应于较低的断点.

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)

这是我使用此方法创建的站点主页的静态快照及其代码的快照.

问题

1. 遵循window-px-widths-first方法是我慎重的决定,并且给出了以下问题.我首先感谢您对内容的论点,但请不要仅限于说我错了,请回答以下特定于window-px-widths-first的问题.

2. 我的方法是一种优雅的方式来做窗口 - 宽度 - 首先与Susy或它是一段丑陋的代码吗？

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%的宽度.何必？有了这个,我想你可以通过断点的简单循环自动化dev-background调用.

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

创建一个在不同断点处更改列跨度的快捷方式在您或我们的端点很难,并且会增加相当多的输出膨胀,除非这实际上是您在每个大小上进行的唯一更改.你目前看起来很好看.