如何创建具有 singularitygs 的 "gallery"？

Question

我正在尝试在我网站的页脚创建一个小画廊。目前，以下 Sass 确实有效，但使用 one、two 和 three 类 每个 footer_block 但我根本看不到另一种方法。

本质上，我有一个嵌套在不对称网格内的对称网格，我想对三个 footer_block 项目中的每一个重复相同的网格跨度调用，但未能弄清楚如何。

Sass 看起来像：

.region--footer {
  color: $color__background--dark;
  border: {
    top: 1px solid $base-ui-color;
  }
  font-family: $secondary-font-family;
  font-size: $font-size-sm;
  .content {
    padding: {
      bottom: em(32px, $font-size-sm);
      top: em(32px, $font-size-sm);
    }
    @extend .cf;
    @include add-grid(4 10 3);
    @include add-gutter(1/4);
    @include add-gutter-style('split');
  }
}

.footer__blocks {
  @extend .cf;
  @include grid-span(1, 2);
  @include layout(3, $gutter: 0) {
    .footer__block {
      @include grid-span(1, 1);
    }
    .footer__block.two {
      @include grid-span(1, 2);
    }
    .footer__block.three {
      @include grid-span(1, 3);
    }
  }
}

HTML 看起来像：

<footer class="region--footer">
  <div class="content">
    <div class="footer__blocks">
      <div class="footer__block one">
        <img src="image.jpg">
    </div>
      <div class="footer__block two">
        <img src="image.jpg">
      </div>
      <div class="footer__block three">
      <img src="image.jpg">
      </div>
    </div>
  </div>
</footer>

提前致谢

Answer 1

浮动跨度

这是一个解决方案：

.footer__blocks {
  @include grid-span(1, 2);

  $cols: 3;

  @include layout($cols, $gutter: 0) {
    .footer__block {
      @include float-span(1);
      &:nth-child(#{$cols}n+#{$cols}) {
        @include float-span(1, 'last');
      }
    }
  }
}

演示：http://sassmeister.com/gist/5dab07e1ab0b861e4b4a

1. 我们使用 float-span(1) 跨越对称网格中的项目。它允许我们对所有项目使用相同的定义，而不是为每个项目应用一个唯一的位置。
2. 每行中的最后一项不应有右间距。 &:nth-child(3n+3) 选择器以所有行中的每三个项目为目标。我们应用 float-span(1, 'last')，告诉 Singularity 不要添加右边距。

奇点快速扳手

您还可以利用我的 singularity-quick-spanner 扩展来进一步简化事情。它可以让你用一行代码实现与上面相同的结果：

.footer__blocks {
  @include grid-span(1, 2);

  @include layout(3, $gutter: 0) {
    .footer__block {
      @include thumb-span(3); // Magic! :D
    }
  }
}

演示：http://sassmeister.com/gist/c2c4ab643165c9da2526