如何删除 Susy 网格中第一行和最后一行元素的装订线

Question

如何在使用susy grid时完全去除行的第一个和最后一个元素的装订线？

这是我的模型标记。

http://codepen.io/anon/pen/mVBmLY

$susy:(
columns: 12,
gutters:2,
gutter-position:split,
    );
ul{
    @include container(800px);
}
li{
    @include span(4);
}

它使用"排水沟位置：拆分"。正如您在代码笔上看到的，行中的第一个和最后一个元素仍然具有其外边距。

我可以通过将装订线位置设置为"之后"并在行中的最后一个元素上使用"last"关键字来解决此问题。

http://codepen.io/anon/pen/eJGWKE

$susy:(
columns: 12,
gutters:2,
gutter-position:after,
    );
ul{
    @include container(800px);
}
li{
    @include span(4);
}
 li:nth-of-type(3n+3){
        @include span(last 4);
 }

还有其他办法吗？使用 nht 类型选择器有点无视为我使用网格的意义。

Answer 1

经过一些实验，我设法创建了提供以下功能的mixin：

@mixin new_span($elements){
@include span($elements);
$n: map-get($susy, columns)/$elements;
&:nth-of-type(#{$n}n +#{$n}){
    @include span(last $elements);
}
}

请记住，为了工作，它需要将装订线位置设置为 after。

它的意思是美元与 oryginal susy span mixin 相同。我在模型网格上测试了它，它有效，认为它可能需要更多测试。

Answer 2

这是代码笔分叉

通过使用 gutter-position:after ，并使用 li 中的第 n 个子选择器来查找最后一个元素，要容易得多。所以如果你想要连续 3 列，你会做第 n 个孩子（3n+1） 并说@include span(4 last)：

@import "susy";
$susy:(
columns: 12,
gutters:2,
gutter-position:after,
    );
ul{
    @include container(800px);
}
li{
    @include span(4);
  &:nth-child(3n+1) {
    @include span(4 last);
  }
}