SCSS :nth-child mixin 与数组答案

【问题标题】：SCSS :nth-child mixin with arraySCSS :nth-child mixin 与数组
【发布时间】：2016-12-17 09:40:57
【问题描述】：

所以我希望有人可以帮助我解决一些看起来简单的事情。

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

而不是我写出以下内容：

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

}

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

【问题讨论】：

标签： css arrays sass css-selectors

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

【讨论】：

【解决方案2】：

下面的 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;
  }
}

【讨论】：

【解决方案3】：

您可以使用“列表...” - 取决于您的预编译器版本）。我为它做了一个小代码笔：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：这并不能解决您的“方程式”问题 - 我真的不认为这是可能的 :-)

【讨论】：