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

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

1 个答案: