SCSS：nth-child mixin with array

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

我设置了一个网格模板,其中包含广告,位于不同的位置.导致代码结构有点复杂.基本上现在让我看起来恰到好处,我正在使用相当多的& 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;
    }
}

}

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

解决方法

这有效：

$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","2");
div {
    #{nth-child-namer($array)} {
        margin-right: $gutter-width;
    }
}

SCSS：nth-​​child mixin with array

解决方法

猜你在找的CSS相关文章

SCSS：nth-child mixin with array