創建一個recusion mixin scss

Question

我想創建一個遞歸@mixin。 mixin的任務是添加給定列表中的選擇器並應用CSS規則。因此，這樣的結果必須是這樣的：

[data-tag]:not([conref]) { 
border: dashed 2px #2999d1; 
} 
[data-tag]:not([conref])[nodeid] { 
border: dashed 2px #2999d1; 
} 
[data-tag]:not([conref])[nodeid][draggable] { 
    border: dashed 2px #2999d1; 
} 
[data-tag]:not([conref])[nodeid][draggable][class] { 
    border: dashed 2px #2999d1; 
} 

我已經創建看起來像這樣@mixin：

@mixin set-border-to-selectors($list, $item){ 
    @if false == (index($list, $item)){ 
     @error "Fail: #{$item} not in list: #{$list}"; 
    } 
    @else{ 
     $index: index($list, $item); 
     @debug "index: #{$index}"; 
     $item: nth($list, $index); 
     &[#{$item}]{ 
      @include set-data-tag-border; 
      @if($index + 1 <= length($list)){ 
       $item: nth($list, $index + 1); 
       @include set-border-to-selectors($list, $item); 
      } 
     } 
    } 
} 

我第一次使用它的工作原理相當不錯的功能。

@mixin show-data-tag-border{ 
    $data-tag-list: (#{$id}, draggable, class); 
    $data-tag-list-two: (#{$id}, #{$conref}, class); 

    &[data-tag]:not([#{$conref}]){ 
     @include set-data-tag-border; 
     @include set-border-to-selectors($data-tag-list, #{$id}); 
    } 
    &[data-tag]{ 
     @include set-border-to-selectors($data-tag-list-two, #{$id}); 
    } 

但設置邊界到選擇函數的第二次調用拋出一個錯誤，因爲在recusion @mixin的$索引不包含一個數字。它是空的。

編輯----------------------------------

我調用函數從p{@include show-data-tag-border;}和邊框將被設置爲@mixin set-data-tag-border{border: solid 1px black}。這兩個變量： $id: id; $conref: conref;

編輯----------------------------------

有什麼不對，我沒看到或者這種方法在SCSS中創建遞歸是錯誤的？我不會只使用這個函數一次，並且寫下一個或多個類似的函數來完成這個。

Answer 1

問題是列表元素的聲明。我必須打勾。 因此，而不是這樣的：

$data-tag-list: (#{$id}, draggable, class); 
$data-tag-list-two: (#{$id}, #{$conref}, class); 

我必須每個元素在列表中附上與刻度線：

$data-tag-list: ('#{$id}', 'draggable', 'class'); 
$data-tag-list-two: ('#{$id}', '#{$conref}', 'class'); 

和它的作品！

謝謝hon2a的幫助！

下面是檢查了全碼：

$id: id; 
 
$conref: conref; 
 

 
@mixin set-data-tag-border{border: solid 1px black} 
 

 
@mixin set-border-to-selectors($list, $item){ 
 
    @if false == (index($list, $item)){ 
 
     @error "Fail: #{$item} not in list: #{$list}"; 
 
    } 
 
    @else{ 
 
     $index: index($list, $item); 
 
     @debug "index: #{$index}"; 
 
     $item: nth($list, $index); 
 
     &[#{$item}]{ 
 
      @include set-data-tag-border; 
 
      @if($index + 1 <= length($list)){ 
 
       $item: nth($list, $index + 1); 
 
       @include set-border-to-selectors($list, $item); 
 
      } 
 
     } 
 
    } 
 
} 
 

 
@mixin show-data-tag-border{ 
 
    $data-tag-list: ('#{$id}', 'draggable', 'class'); 
 
    $data-tag-list-two: ('#{$id}', '#{$conref}', 'class'); 
 

 
    &[data-tag]:not([#{$conref}]){ 
 
     @include set-data-tag-border; 
 
     @include set-border-to-selectors($data-tag-list, #{$id}); 
 
    } 
 
    &[data-tag]{ 
 
     @include set-border-to-selectors($data-tag-list-two, #{$id}); 
 
    } 
 
} 
 

 
p{@include show-data-tag-border;}

Answer 2

我不會試圖修復你的代碼，因爲它太大了。遞歸應該只是罰款是這樣的：

@mixin set-borders ($list, $index: 1) { 
    @if $index <= length($list) { 
     @if $index == 1 { 
      &#{nth($list, $index)} { 
       @include set-borders($list, $index + 1); 
      } 
     } @else { 
      &, 
      &#{nth($list, $index)} { 
       @include set-borders($list, $index + 1); 
      } 
     } 
    } @else { 
     // ... (set the required properties) 
    } 
}