【问题标题】：How can I create a "gallery" with singularitygs?我怎样才能创建一个带有singularitygs的“画廊”？
【发布时间】：2015-02-26 14:22:04
【问题描述】：

我正在尝试在我网站的页脚中创建一个小画廊。目前，以下 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>

提前致谢

【问题讨论】：

标签： css sass singularitygs

【解决方案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

我们使用float-span(1) 来跨越对称网格中的项目。它允许我们对所有项目使用相同的定义，而不是为每个项目应用唯一的位置。
每行中的最后一项不应有右装订线。 &: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

【讨论】：