Question

我一直在尝试找出使用Singularity显示项目列表的最佳解决方案。

我想基本上删除每行最后一项的填充，但是将该填充添加回所有项目的整个项目宽度。

我认为解决方案将更多地与css相比而不是奇点，但也许在我缺少的奇点中有一个很好的解决方案？

这些项目最终将由cms定期添加。

Answer 1

好的，你应该考虑很多事情。

首先，Singularity和Breakpoint尚未与Sass 3.3兼容，而Sassmeister.com已经在使用Sass 3.3。确保您在项目中使用Sass 3.2.x.要演示Sass + HTML，请考虑使用SassBin.com。

其次，您正在使用12px排水沟。这是不正确的。相对于单个列单位，装订线被指定为无单位值。因此，当你有两个柱子和12px排水沟时，你实际上告诉Singularity将排水沟比柱子大12倍。

相反，提供这样的相对排水沟：$gutters: 0.1。

第三，您为中等大小指定了4列网格，但您只将它们用作双列网格。如果您在项目的某处不使用四列，我建议您省略该4列定义并继续使用2列网格。

第四，您在容器上设置了一个大纲但它从未正确显示，因为容器的高度为零。它的高度为零，因为它的所有内容都是浮动的。

要让容器包含浮动内容，您必须将clearfix应用于容器。谷歌了。应用clearfix的最简单方法是使用Compass附带的pie-clearfix mixin。但我建议您使用Toolkit附带的%clearfix-micro扩展名。

第五（是否有这样一个词？），为了消除右边的差距，你必须将 last float-span应用到最后每一行中的项目。要做到这一点，您必须了解nth-child的工作原理。我强烈建议您进行谷歌搜索。

简而言之，nth-child接受一个看起来像An+B的参数，其中A和B是整数。 A应该等于列数，B是您要寻址的列数。当您在寻找最后一列时，B在您的情况下等于A.所以整个事情看起来像nth-child(3n+3)。

第六，您正在以不同的断点应用Singularity跨度，以便它们累积。当您一次覆盖所有项目的跨度时，这是可以的，以便在每个媒体查询中重新定义所有项目。

但是当您有选择地应用样式（到每行的最后一项）时，您也必须取消它们。这是一件非常无聊的事情。

相反，您应该缩小媒体查询的范围，以便它们仅解决两个断点之间的特定切片。在这种情况下，跨越样式不会累积。

如果您使用了我的所有推荐内容，则代码的外观如下：http://sassbin.com/gist/7951326/

第七（我的舌头受伤），考虑使用Breakpoint Slicer扩展，这是Breakpoint的一个小包装器，它可以非常快速，轻松地切断断点范围。

如果您使用断点切片器，则代码的外观如下：http://sassbin.com/gist/7951724/

第八，如果您确实需要固定排水沟，则应设置$gutter-styles: 'fixed'选项。

Answer 2

当然你可以这样做：

&:nth-child(3n) {
  margin-right: 0;
}

在Singularity wiki上，似乎表明这应该有效：

&:nth-child(3n) {
      @include float-span(2, 'last');

}

但它没有或我不理解它的功能。

Answer 3

感谢您的广泛答复。

我很清楚nth-child选择器。我沿着这条路走下去，但我认为这不是一个干净的解决方案。

我知道我没有清楚浮动......这不是我问题的一部分。

设置固定高度12px并不正确

我需要固定的排水沟。这就是问题的关键所在。

我开始制作我自己喜欢的固定排水沟液柱解决方案：http://codepen.io/joshuarule/pen/zsfEo