Перекрывающиеся сетки с 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/