css - 如何使用 singularitygs 创建 "gallery"？

Question

我正在尝试在我网站的页脚创建一个小画廊。目前，以下 Sass 确实有效，但在每个 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

float 跨度

这是一个解决方案:

.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 不要添加右边距。

奇点快速 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