假设我在另一列内有一个文章网格(2 列)。什么是最好的方法来实现这一点,而不必明确地告诉文章应该在哪一列上的奇异性。
它是用伪类声明它的唯一选择吗?
article:nth-child(1n){
@include grid-span(1,1);
}
article:nth-child(2n){
@include grid-span(1,2);
}
谢谢。
假设我在另一列内有一个文章网格(2 列)。什么是最好的方法来实现这一点,而不必明确地告诉文章应该在哪一列上的奇异性。
它是用伪类声明它的唯一选择吗?
article:nth-child(1n){
@include grid-span(1,1);
}
article:nth-child(2n){
@include grid-span(1,2);
}
谢谢。
有一种比 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 update
or bundle update
,您就可以使用最干净的解决方案。
您可以使用浮点输出样式,但您仍然需要处理右列上的额外填充。
http://sassmeister.com/gist/5256403 - 您可能必须从下拉菜单中选择奇异性才能使此链接正常工作。
使用浮点数,在位置列中写入“last”等同于 Susy 中的“omega”。处理额外的填充仍然会很棘手,但至少你的列在没有 nth 的情况下彼此相邻浮动。
如果你仍然不满意,你可以编写自己的输出样式。不确定什么 CSS 会起作用,但无论如何,CSS Singularity 生成的是完全可定制的。我尚未完整记录,但您可以添加自己的输出样式:https ://github.com/Team-Sass/Singularity/tree/1.xx/stylesheets/singularitygs/api