使用Singularity以最小标记构建多列网格的最佳方法是什么

Question

假设我在另一列中有一个文章网格（2列）。 实现这一目标的最佳方法是什么，而不必明确告诉文章应该是哪一列。

它是用伪类声明它的唯一选择吗？

article:nth-child(1n){
   @include grid-span(1,1);
}
article:nth-child(2n){
   @include grid-span(1,2);
}

感谢。

Answer 1

有一种比Scott aka user2242314建议的更短的方式::

$grids: 12;
$gutters: 1/3;

.column {
  @include float-span(1);

  &:last-child {
    @include float-span(1, 'last'); }}

不幸的是，Singularity中存在一个错误，它阻止使用这种简短的方法，即使它是Singularity文档的suggested。

我修复了错误并提交了pull request。等待Scott或Sam aka Snugug接受它并发布更新的gem（版本1.0.7或更高版本）。然后运行gem update或bundle update，您就可以使用最干净的解决方案。

Answer 2

您可以使用浮点输出样式，但仍然需要处理右列上的额外填充。

http://sassmeister.com/gist/5256403 - 您可能需要从下拉菜单中选择奇点才能使此链接正常工作。

使用浮点数，在位置列中写“last”相当于Susy中的“omega”。处理额外的填充仍然会很棘手，但至少你的列在没有nth的情况下彼此相邻。

如果您仍然不满意，可以编写自己的输出样式。不确定CSS会做什么技巧，但无论如何，CSS Singularity生成的是完全可定制的。我还没有完整的文档，但您可以添加自己的输出样式：https://github.com/Team-Sass/Singularity/tree/1.x.x/stylesheets/singularitygs/api