创建递归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});
    }

但是第二次调用set-border-to-selector函数会引发错误，因为@mixin的$ index中不包含数字。它是空的。

我从p{@include show-data-tag-border;}调用函数，并且边框将在@mixin set-data-tag-border{border: solid 1px black}中设置。而这两个变量：

$id: id;
    $conref: conref;

我看不到有什么问题吗，或者这种方法在SCSS中创建递归是错误的吗？我不会只使用一次此功能，并在下面编写一个或多个类似的功能来完成此操作。

Answer 1

我不会尝试修复您的代码，因为它太大了。递归应该像这样正常工作：

@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)
    }
}

Answer 2

问题是列表元素的声明。我必须打勾。所以代替这个：

$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;}