Fatal编程技术网
  • css/
  • Css 将参数传递给Sass BEM mixin以@extend parent

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

css sass

Css 将参数传递给Sass BEM mixin以@extend parent,css,sass,mixins,bem,Css,Sass,Mixins,Bem,我正在创建一个应用程序，该应用程序将根据用户在应用程序中的内容或位置具有不同的css背景。我需要将以下修饰符应用到我的应用程序中的各个类。我已经为此编写了一个mixin，看起来是这样的： @mixin animalBackground($arg:null) { @if ($arg) { @extend $arg; } &--cat { background: $grey url('/img/cat.png'); }

我正在创建一个应用程序，该应用程序将根据用户在应用程序中的内容或位置具有不同的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');
    }
}
现在的问题是，在我生成的代码中有一个错误，
未能@extend“$arg”。找不到选择器“$arg”。
当我删除
如果
条件时，父类未扩展/继承。我如何完成我需要完成的事情


提前谢谢。
我想您必须使用变量的值。所以你应该试试这个：


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



这解决了错误，但是修饰符类没有导入它们的父css属性…如果我理解正确，那么您必须在修饰符中使用
@extend
。