Sass BEMミックスインの引数を@extend parentに渡す

Question

コンテンツやユーザーがアプリ内にある場所によってCSSの背景が異なるアプリを作成しています。私は私のアプリ内のさまざまなクラスに次の修飾子を適用する必要があります。私はそうのように見え、このためのミックスインを書かれている：

@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'); 
    } 
} 

は、今私は私が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'); 
    } 
} 

は、今私が持っている問題は、私は、親クラスが継承/拡張されていないif条件を削除すると、私の生成されたコード内failed to @extend "$arg". The selector "$arg" was not found.というエラーを取得していることです。私は何をする必要があるのですか？

ありがとうございます。

Answer 1

私は変数の値を使用する必要があると思います。だから、あなたはこれを試してみてください：

erroringをソートしますが、修飾子クラスが私が正しくあなたを理解していれば