将参数传递给 Sass BEM mixin 到 @extend parent

Question

我正在创建一个应用程序，该应用程序将根据内容或用户在应用程序中的位置具有不同的 CSS 背景。我需要将以下修饰符应用于我的应用程序中的各种类。我为此编写了一个 mixin，如下所示：

@mixin animalBackground($arg:null) {

    @if ($arg) {
        @extend $arg;
    }

    &--cat {
        background: $grey url('/img/cat.png');
    }

    &--dog {
        background: $blue url('/img/dog.png');
    }

    &--mouse {
        background: $light-green url('/img/mouse.png');
    }
}

现在我想在不同的地方添加这个 mixin，这样我就可以拥有 3 个不同的修饰符类，这就是我将它添加到我现有的 sass 代码中的方式：

.animal-section {

     &__target1 {
        overflow-y: scroll;
        height: 100%;
        @include animalBackground();
    }

    &__target2 {
            padding-top: $full-header-size;
            height: 100vh;
            @include animalBackground('.animal-section__target2');
    }
}

现在我遇到的问题是，在我生成的代码中出现failed to @extend "$arg". The selector "$arg" was not found. 错误，当我删除if 条件时，父类没有扩展/继承。我如何完成我需要完成的事情？

提前致谢。

Answer 1

我认为你必须使用变量的值。所以你应该试试这个：

@if ($arg) {
    @extend #{$arg};
}