singularitygs - 使用 Singularity 构建具有最少标记的多列网格的最佳方法是什么

Question

假设我在另一列内有一个文章网格（2 列）。什么是最好的方法来实现这一点，而不必明确地告诉文章应该在哪一列上的奇异性。

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

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

谢谢。

score 6 · Accepted Answer

有一种比 Scott aka user2242314上面建议的更短的方法：

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

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

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

不幸的是，Singularity 中有一个错误会阻止使用这种简短的方法，即使Singularity 文档建议了它。

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

score 1 · Accepted Answer

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

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

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

如果你仍然不满意，你可以编写自己的输出样式。不确定什么 CSS 会起作用，但无论如何，CSS Singularity 生成的是完全可定制的。我尚未完整记录，但您可以添加自己的输出样式：https ://github.com/Team-Sass/Singularity/tree/1.xx/stylesheets/singularitygs/api

2 回答 2