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

SASS和数据属性多个

1 个答案: