创建一个递归混合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 函数的第二次调用会抛出错误，因为 recusion @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;}