SCSS:nth-​​child mixin with array

Question

所以我希望有人可以用一些看似简单的东西来帮助我.

我有一个网格模板,设置了广告,在不同的位置.导致代码结构有点复杂.基本上现在让我看起来恰到好处,我正在使用相当多的&n:子选择器来删除各个断点处的边距.

而不是我写出的东西,如:

&:nth-child( 3 ),
    &:nth-child( 10 ),
    &:nth-child( 13 ),
    &:nth-child( 17 ),
    &:nth-child( 20 ),
    &:nth-child( 23 ),
    &:nth-child( 26 ),
    &:nth-child( 30 ),
    &:nth-child( 33 ),
    &:nth-child( 37 ),
    &:nth-child( 43 ) {
        margin-right: $gutter-width;
    }

我一直试图创建一个混合,允许我传递一个整数数组和css吐出我上面显示的东西,通过调用的东西沿着

@include nth-children( 3, 10, 13, 17, 20...) {
    margin-right: $gutter-width;
}

唯一的问题是,我还需要能够将等式作为该列表的一部分(20n - 5)或任何情况下传递.

我尝试过一些东西,但似乎无法接近它

@mixin nth-children($nths) {

@for $i from 1 through length($nths) {
    &:nth-child(#{$i}) {
        @content;
    }
}

}

我想防止首先创建列表,因为值将在多种不同的屏幕尺寸和页面布局上不断变化.

Answer 1

这有效：

$gutter-width: 12px;
$array: ("2n+1", "1", "2");
div {
    @each $i in $array {
        &:nth-child( #{$i} ) {
            margin-right: $gutter-width;
        }
    }
}

要将其保持在单行中：

@function nth-child-adder($item) {
    @return "&:nth-child(" + $item + ")";
}

@function nth-child-namer($array) {
  $x: "";
  @each $i in $array {
    @if $x != "" {
        $x: append($x, "," + nth-child-adder($i));
    }
    @else{
        $x: append($x, nth-child-adder($i));
    }
  }
  @return $x;
}

$gutter-width: 12px;
$array: ("2n+1", "1", "2");
div {
    #{nth-child-namer($array)} {
        margin-right: $gutter-width;
    }
}