缩略图网格 - 使用奇点

Question

我使用 Singularity 已经有一段时间了，我非常喜欢它。

我的清单上剩下的一件事是使用 Singularity 创建一个缩略图（或任何其他元素）网格。换句话说，一组重复的元素，从左到右流动，在网格的每一列中都有一个元素，然后在新的行上继续，再次在第 1 列。

假设网格是 12 列，大屏幕尺寸（使用断点），8 列中等屏幕尺寸，6 列小屏幕尺寸。

我认为可以使用 nth-of-type{} 完成这样的事情是否正确？

Bourbon Neat 具有 Alpha/Omega（强制移除排水沟）和 Row helpers 的概念。

这是我目前所处的位置...

这是 scss..

@include layout-at(6, $small) {
  @include background-grid($color: #833);
  .story-item {
    @include float-span(1);
    &:nth-of-type(6n) {
      clear: left;
    }
  }
}

@include layout-at(8, $medium) {
  @include background-grid($color: #833);
  .story-item {
    @include float-span(1);
    &:nth-of-type(8n) {
      clear: left;
    }
  }
}

我有一个网站的主要布局（侧边栏、主要等），然后我在给定断点处定义了一个内容布局。

我有两个问题。

1. 我需要做什么才能让第 8 个故事项目重新回到同一行。
2. layout-at mixin 是否支持移动优先配置设置？由于某种原因 &:nth-of-type(6n) 在第二个布局中优先于 &:nth-of-type(8n)-at(8, $medium)

非常感谢任何想法、建议或提示。

更新：

好的 - 差不多了..

@include layout-at(6, $small) {
  @include background-grid($color: #833);
  .story-item {
    @include float-span(1);
    &:nth-child(6n) {
      background-color: #F00;
      @include float-span(1, 'last');
    }
  }
}

@include layout-at(8, $medium) {
  @include background-grid($color: #833);
  .story-item {
    @include float-span(1);
    &:nth-child(8n) {
      background-color: #F00;
      @include float-span(1, 'last');
    }
  }
}

这几乎可行，唯一的问题是所有 &:nth-child(an) 选择器都被累积应用，因为我相信第 n 个子选择器正在“突破”布局（和断点）并且在没有任何媒体查询 css 的情况下应用于父元素来约束它们。

最终更新

这是最终的 scss 标记，具有 2 列（未显示）、3 列和 4 列的新布局。每个新布局都需要“清除”或重置前一个布局的 float-span nth-child。

@include layout-at(3, $small) {
  //@include background-grid($color: #833);
  .story-item {
    @include float-span(1);
  }

  .story-item:nth-child(2n) {
    @include float-span(1);
  }

  .story-item:nth-child(3n) {
    @include float-span(1, 'last');
  }
}

@include layout-at(4, $medium) {
  //@include background-grid($color: #833);
  .story-item {
    @include float-span(1);
  }

  .story-item:nth-child(2n) {
    @include float-span(1);
  }

  .story-item:nth-child(3n) {
    @include float-span(1);
  }

  .story-item:nth-child(4n) {
    @include float-span(1, 'last');
  }
}

Answer 1

看看 Singularity Quick Spanner。它使跨越缩略图网格变得轻而易举。

演示：http://lolmaus.github.io/singularity-quick-spanner/

项目页面：https://github.com/lolmaus/singularity-quick-spanner