css - 有没有可选的&这样的东西？

Question

考虑以下代码:

@mixin bar() {
    @if & {
        &.bar {
            display: none;
        }
    } @else {
        .bar {
            display: none;
        }
    }
}

@include bar();

.foo {
    @include bar();
}

...编译为:

.bar {
    display: none;
}

.foo.bar {
    display: none;
}

有没有一种方法可以在不复制 .bar block 的情况下编写这个 mixin？

Answer 1

您可以将其视为具有可以轻松更改的默认值的参数:

@mixin bar($c:'.bar') {
    @if & {
        &#{$c} {
            display: none;
        }
    } @else {
        #{$c} {
            display: none;
        }
    }
}