SASS Ampersand innerhalb mixin tut Liste Wert

Question

Ich habe eine SASS Liste für meine Farben
ich eine mixin haben akzeptieren Platten zu erstellen, die verschachtelte Elemente hat (zB die Platte Überschrift)

, wenn ich meine mixin auf Panel verwenden -1 und Panel-2 I die richtige Farbe auf die Überschrift der Platten erhalten ...

hier ist die Probe: http://www.sassmeister.com/gist/0d958ed38e58466d61c32a46e8e2538f

Jetzt habe ich auf ein bisschen komplexer Szenario diesen Ansatz versucht, aber ich habe die falsche Farbe auf der Überschrift ... irgendeine Idee, warum wäre das?

http://codepen.io/Zurc/pen/EWbOKG?editors=0100

$colors: #123456, #234567; 

@mixin panelcolor($color: red) { 
    background: rgba($color, .1); 
    border: 1px solid $color; 
    &-heading { 
     background: rgba($color, .2); 
    } 
} 

.panel-1 { 
    @include panelcolor(nth($colors, 1)) 
} 

.panel-2 { 
    @include panelcolor(nth($colors, 2)) 
} 

Dank!

Answer 1

ich die falsche Farbe auf der Überschrift

Ihre SASS korrekt zu sein scheint. Ich vermute mit falsch Sie meinen, dass die Überschriften in .panel-2 und .panel-3 nicht die Hintergrundfarben haben, die in .panel-2-heading und .panel-3-heading definiert sind. Dies liegt daran, dass Ihr HTML diese Klassen nicht enthält.

<div class="panel-2"> 
    <div class="panel-heading">name</div> <!-- should be panel-2-heading --> 
    <div class="panel-body"> 
    <ul class="entities"> 
     <li>entity-name</li> 
    </ul> 
    </div> 
    <div class="panel-footer">Add Entity</div> 
</div> 

Neben meinem Rat in diesem speziellen Szenario wäre nicht das HTML zu ändern, aber Ihre CSS um so etwas wie .panel-2 > .panel-heading { ... } die Redundanz zu vermeiden.