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不包含数字。它是空的。

EDIT ----------------------------------

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

EDIT ----------------------------------

我看不到有什么问题，或者这种做法在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的帮助！

以下是检查的完整代码：

＆＃13;

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

＆＃13;

创建一个递归mixin scss

2 个答案: