Question

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

我想根据黄金比率叠加两个2列网格。

e.g。

$grids: 1.618 1

和

$grids: 1 1.618

Answer 1

我们在singularity-extras plugin中有一个复合网格函数。这仅适用于重叠的均匀列，而不是非均匀列。

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

如果你想写一个函数来使这些更容易，请做。它就像writing a function that spits out a list of numbers一样简单。

Answer 2

或者您可以重新定义$grids。

对于这样的基本用法，这看起来有点像hackish，但是当你必须在一个页面上组合非常不同的网格时（例如黄金比例与大排水沟+带有小排水沟的缩略图网格），我发现这种方法非常宝贵：

<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/

使用Singularitygs重叠网格

2 个答案: