sass - 使用 Singularitygs 重叠网格

Question

我想知道是否有办法用 Singularity.gs 做重叠网格，就像在 Grid Set App 中一样？

我想根据黄金比例覆盖两个 2 列网格。

例如

$grids: 1.618 1

和

$grids: 1 1.618

Answer 1

我们在singularity-extras 插件中确实有一个复合网格函数。不过，这只适用于重叠的统一列，而不适用于非统一列。

也就是说，$grids: 1 .382 1;应该可以得到你想要的东西。黄金分割非常有趣，因为每个部分仍然处于相同的比例，这使得计算更容易一些。

如果您想编写一个函数来使这一切变得更容易，请执行此操作。这就像编写一个输出数字列表的函数一样简单。

Answer 2

或者你可以重新定义$grids.

对于这样的基本用法，这看起来有点骇人听闻，但是当您必须在单个页面上组合非常不同的网格时（例如，带有大间距的黄金比例 + 带有小间距的缩略图网格），我发现这种方法非常宝贵：

<section id=left>
    <div class=column>Foo</div>
    <div class=column>Bar</div>
</section>

<section id=right>
    <div class=column>Foo</div>
    <div class=column>Bar</div>
</section>

 

@import compass
@import singularitygs

.column
  background-color: pink
  margin-bottom: 1em

section
  +pie-clearfix



.column

  #left &
    $grids: 1.612 1

    &:nth-child(1)
      +grid-span(1, 1)
    &:nth-child(2)
      +grid-span(1, 2)

  #right &
    $grids: 1 1.612

    &:nth-child(1)
      +grid-span(1, 1)
    &:nth-child(2)
      +grid-span(1, 2)

演示：http ://sassbin.lolma.us/gist/5663129/