Question

我现在一直在使用Singularity，我非常喜欢它。

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

让我们说网格是12列，大屏幕尺寸（使用断点），8列中等屏幕尺寸，6列屏幕尺寸小。

我认为使用类型为n的{}可以完成这样的事情吗？

Bourbon Neat有Alpha / Omega的概念（迫使排除阴沟）和Row助手。

此处我到目前为止...... thumbnails

这就是scss ..

＆＃13;

@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;
    }
  }
}

＆＃13;

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

我有两个问题。

我需要做些什么才能将第8个故事项备份到同一行。
layout-at mixin是否尊重移动首次配置设置？出于某种原因＆amp;：nth-of-type（6n）优先，在第二个布局中超过＆n;类型（8n）（8，$ medium）

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

更新：

好的 - 差不多......

＆＃13;

@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');
    }
  }
}

＆＃13;

这几乎可行，唯一的问题是所有的＆amp; nth-child（an）选择器都被累积应用，因为我相信第n个孩子的选择器正在打破＆＃39;超出布局（和断点）并应用于父元素而没有任何媒体查询css来约束它们。

最终更新

这里有最终的scss标记，新的布局为2（未显示），3和4列。每个新布局都需要清除＆＃39;或者重置前一个布局的float-span nth-child。

＆＃13;

@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');
  }
}

＆＃13;

Answer 1

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

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

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

缩略图网格 - 使用奇点

1 个答案: