SCSS：nth-​​child mixin with array

Question

所以我希望有人可以帮助我解决似乎简单的问题。

我设置了一个网格模板，其中包含广告，位于不同的位置。导致代码结构有点复杂。基本上现在让我看起来恰到好处，我正在使用相当多的＆amp; nth-child选择器在各个断点处移除/ ad边距。

而不是我写出如下的东西：

&: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;
    }
}

Answer 2

您可以使用“list ...” - 取决于您的预编译器版本）。我为它做了一个小代码：http://codepen.io/anon/pen/AXYRNB

$params: (1, 2, 3, 4);

$paramsLength: length($params);

@function item($item) {
  @return nth($params, $item);
}

@mixin nth-children($params...) {
  @for $i from 1 through $paramsLength  {
    &:nth-child( #{item($i)} ) {
      margin-left: 2em; 
    }
  } 

}

ul {
  @include nth-children($params);
}

有关详情，请查看：https://www.sitepoint.com/sass-multiple-arguments-lists-or-arglist/。

PS：这并没有解决你的“方程式”问题 - 我真的不认为这是可能的： - ）

Answer 3

以下mixin应该可以使用@each：

@mixin nth-children($points...) {
  @each $point in $points {
    &:nth-child(#{$point}) {
      @content;
    }
  }
}

/* example call */
$gutter-width: 5px;
div {
  @include nth-children( 3, 10, 13, 17, 20, "2n + 1") {
      margin-right: $gutter-width;
  }
}