css - SASS和数据属性多重

Question

我对SAS的嵌套多选有问题，多多琢磨，希望大家能帮我理解一下(因为我英文写得不是很好)。

SASS 混合:

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