有可选的＆吗？

Question

考虑以下代码：

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

@include bar();

.foo {
    @include bar();
}

...编译为：

.bar {
    display: none;
}

.foo.bar {
    display: none;
}

是否可以在不复制.bar块的情况下编写此mixin？

Answer 1

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

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