Question

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

这是我的模型标记。

$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选择器有点无视我使用网格的点。

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);

}

}

请记住，为了工作，需要设置天沟位置。

这意味着与oryginal susy span mixin一样使用。我在我的模拟网格上测试了它并且它工作，认为它可能需要更多的测试。

Answer 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);
  }
}

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

2 个答案: