SASS和数据属性多个

Question

我有一个SAS嵌套的问题，要做多个选择，多说，希望你能帮助我和理解(因为我的英文写得不好)

SASS mixin:

@mixin data($x) {
    $sel: &;
    $collector: ();
    @for $i from 1 through length($sel) {
        $s: nth($sel, $i);
        $last: nth($s, -1);
        @if str-slice($last, -1) == "]" {
            // if is just the bare attribute with no value, $offset will be -1, otherwise it will be -2
            $offset: -1;
            $current-x: $x;
            @if str-slice($last, -2) == '"]' {
                    // this attribute already has a value, so we need to adjust the offset
                    $offset: -2;
            } @else {
                    // no attribute value, so add the equals and quotes
                    $current-x: '="' + $x + '"';
            }
            $last: str-slice($last, 1, $offset - 1) + $current-x + str-slice($last, $offset);
            $collector: append($collector, set-nth($s, -1, $last), comma);
        } @else {
            // following line will append $x to your non-attribute selector
            $collector: append($collector, selector-append($s, $x), comma);
            // the following line will not change your non-attribute selector at all
            //$collector: append($collector, $s, comma);
        }
    }
    @at-root #{$collector} {
        @content;
    }
}

SASS

:

[data-content] {
    @include data("content") {
        background: black;
    }
}

输出:

[data-content="content"] {
    background: black;
}

问题是我不能嵌套多个项目，例如不工作:

[data-content] {
    @include data("content", "menu") {
        background: black;
    }
}

输出:

[data-content="content"],
[data-content="menu"] {
    background: black;
}

有办法解决吗?

Answer 1

如果你不介意指定你的选择器，而不是把它们作为变量传递，你总是可以这样做的。

[data-content="content"], [data-content="menu"]{
    @include data() {
        background: black;
    }
}