2016-08-09 88 views
1

Ich erstelle eine App, die verschiedene css Hintergründe je nach dem Inhalt oder der Position des Benutzers innerhalb der App haben wird. Ich muss die folgenden Modifikatoren auf verschiedene Klassen in meiner App anwenden. Ich habe eine mixin dafür geschrieben, der wie so aussieht:Pass Argument zu Sass BEM Mixin zu @Erweiterte Eltern

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

Jetzt habe ich verschiedene Orte, wo ich diese mixin hinzufügen wollen, so kann ich die 3 verschiedenen Modifikator Klassen haben, das ist, wie ich es möchte hinzufügen zu meinen bestehende sass Code:

.animal-section { 

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

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

Nun das Problem ist, dass ich in meinem generierten Code wird einen Fehler bekommen, dass failed to @extend "$arg". The selector "$arg" was not found. Wenn ich den if Zustand der Elternklasse entferne nicht verlängert/geerbt. Wie erreiche ich, was ich tun muss?

Vielen Dank im Voraus.

Antwort

1

Ich denke, dass Sie den Wert der Variablen verwenden müssen. So sollten Sie dies versuchen:

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

dass die erroring sortiert, aber die Modifikator Klassen importieren, nicht ihre Eltern CSS-Attribute ... –

+0

Wenn ich Sie richtig verstehe, dann müssen Sie '@ extend' in Ihre Modifikator. – RWAM