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

【问题标题】：How to remove gutter for first and last element of row in Susy grid如何删除Susy网格中行的第一个和最后一个元素的装订线
【发布时间】：2016-01-15 20:41:32
【问题描述】：

如何在使用 susy 网格时完全删除行的第一个和最后一个元素的排水沟？

这是我的模型标记。

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

$susy:(
columns: 12,
gutters:2,
gutter-position:split,
    );

ul{
    @include container(800px);
}

li{
    @include span(4);
}

它使用“gutter-position:split”。正如您在 codepen 上看到的那样，行中的第一个和最后一个元素仍然有它们的外部边距。

我可以通过将 gutter-position 设置为“after”并在行中的最后一个元素上使用“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-of-type 选择器有点违背我使用网格的点。

【问题讨论】：

标签： sass susy

【解决方案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);

}

}

请记住，为了工作，它需要将 gutter-position 设置为 after。

它的使用方式与原始 susy span mixin 相同。我在我的模型网格上对其进行了测试，它工作正常，我认为它可能需要更多测试。

【讨论】：

【解决方案2】：

Here's the codepen fork

通过使用gutter-position:after 并在您的 li 中使用 nth-child 选择器来查找最后一个元素，这要容易得多。因此，如果您想要连续 3 列，您可以执行 nth-child(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);
  }
}

【讨论】：