我怎样才能创建一个＆＃34;画廊＆＃34;奇点？

Question

我试图在我网站的页脚中创建一个小图库。目前，以下Sass确实有效，但使用 one ，两个和三个类似乎效率不高在每个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

您还可以使用我的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