SASS/SCSS nicht akzeptiert & &

Question

Inside my Komponente würde Ich mag einen Modifikator hinzuzufügen, die eine höhere Spezifikation haben sollte, so meine Ausgabe sollte wie folgt aussehen:.

gewünschte Ausgabe:

.component { 
    // ... 
} 

.component.component--modifier { 
    // ... 
} 

SCSS Vorschlag:

Aber das funktioniert nicht, ich bekomme Kompilierfehler: Art von "Formatfehlern" oder "ungültigen CSS".

Answer 1

Sie einen mixin definieren könnte:

@mixin mod($n) { 
    .#{$n} { 
     color: blue; 
    } 
    .#{$n}.#{$n}--modifier { 
     color: red; 
    } 
} 
@include mod(component); 

Ausgang:

.component { 
    color: blue; 
} 

.component.component--modifier { 
    color: red; 
} 

Aber es ist wahrscheinlich ein mehr raisonnable Ansatz, um Ihr eigentliches Problem, wie mit einer modifier Klasse.

Answer 2

Eine einfachere Lösung ist die zweite & interpoliert werden, indem sie in #{&} setzen:

.component { 
    // ... 
    &#{&}--modifier { 
    // ... 
    } 
} 

Hinweis: Der Punkt zwischen den beiden & nicht benötigt, weil & es bereits enthält.

Eine äquivalente mixin zu Densys Zusammenhang wäre:

@mixin modifier($modifier) { 
    &#{&}--#{$modifier} { 
    @content; 
    } 
} 

Verbrauch:

.component { 
    @include modifier(breadcrumb) { 
    // ... 
    } 
}