css - 用 Singularitygs 移除最后一个排水沟？

Question

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

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

我认为解决方案与css的关系比奇点更多，但也许在我缺少的奇点中有一个很好的解决方案？

这些项目最终会被一个cms定期添加。

score 2 · Accepted Answer

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

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

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

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

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

第四，您在容器上设置了轮廓，但由于容器的高度为零，因此无法正确显示。它的高度为零，因为它的所有内容都是浮动的。

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

第五（甚至有这样的词吗？），要消除右边的空白，你必须对每一行的最后一项应用最后一个。 float-span要正确地做到这一点，您必须了解其nth-child工作原理。我强烈建议你google一下。

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

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

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

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

如果您使用了我的所有建议，您的代码将如下所示：http: //sassbin.com/gist/7951326/

第七点（我的舌头很痛），考虑使用Breakpoint Slicer扩展，这是一个用于 Breakpoint 的小型包装器，它使切片断点范围变得非常快速和轻松。

如果您使用 Breakpoint Slicer，您的代码如下所示：http: //sassbin.com/gist/7951724/

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

score 0 · Accepted Answer

当然你可以这样做：

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

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

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

}

但它没有，或者我不明白它的功能。

score -1 · Accepted Answer

感谢您的广泛回答。

我很清楚第 n 个子选择器。我走了那条路，但认为这对我来说不是一个干净的解决方案。

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

我需要固定的排水沟。这就是这里问题的全部症结所在。

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

3 回答 3