SASS ampersand inside mixin doesnt accept list value

Question

I have a SASS list for my colors
I have a mixin to create panels, which has nested elements (e.g. the panel heading)

when I use my mixin on panel-1 and panel-2 I get the right color on the heading of the panels...

here is the sample: http://www.sassmeister.com/gist/0d958ed38e58466d61c32a46e8e2538f

Now I tried that approach on a bit more complex scenario but I get the wrong color on the heading... any idea why would that be?

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))  
}

Thanks!

Marvin Marvin · Accepted Answer · 2017-03-17T15:43:47

I get the wrong color on the heading

Your SASS seems to be correct. I guess with wrong you mean that the headings in .panel-2 and .panel-3 do not have the background colors defined in .panel-2-heading and .panel-3-heading. This is due to the fact that your HTML misses these classes.

<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>

In addition my advice in this specific scenario would be to not change the HTML but your CSS to something like .panel-2 > .panel-heading { ... } to avoid the redundancy.

SASS ampersand inside mixin doesnt accept list value

1 Answers