SCSS :nth-child mixin 与数组

Posted 2023-03-06

【中文标题】SCSS :nth-child mixin 与数组

【英文标题】：SCSS :nth-child mixin with array

【发布时间】：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;
    

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

【参考方案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：这并不能解决您的“方程式”问题 - 我真的不认为这是可能的 :-)