如何创建具有奇点的"gallery"？

Question

我正试图在我的网站页脚创建一个小画廊。目前，下面的Sass确实有效，但在每个页脚块上使用一个、两个和三个

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

萨斯看起来像：

.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

浮动span

这里有一个解决方案：

.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')，告诉奇点不要添加右边距

奇异快速扳手

你也可以使用我的奇异快速扳手扩展来进一步简化事情。它可以让你用一行代码实现与上面相同的结果：

.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