具有奇异点的重叠网格

Question

我想知道是否有一种方法可以用奇点做重叠网格。像在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/