Why does Miguel set the panel-default twice?I didn't get his explanation.

Hi, I know this question is old, but I had the same one, so here's my answer for anyone else who's scratching their head. This one kinda threw me.

.panel {
@extend %panel-default;//line 2

@include m(centered) {//line 4
  @extend %panel-default;
  @extend %center-align;
  }

@include m(padded) {//line 9
  @extend %panel-padding;
  @include m(centered) {//line 11
    @extend %center-align;
    @extend %panel-padding;
  }
}
}

In the markup above, we create the .panel class. We then extend the %panel-default placeholder as a base style for the panel item (line2).

We then create the 2 modifier mixins:

1) m(centered), to provide centering to the default style. We have to re-state the %panel-default placeholder in order to modify it (this answers keith's question, i hope); and

2) m(padded), which provides extra padding and also the option of centering, if desired. Note how the centered option of the second mixin also has to restate %panel-padding in order to modify it.

This gives us four options in our html:

1)header class="panel" (This provides the default padding and is aligned left -- no centering); see line 2

2)header class="panel--centered" (This provides the default padding and is centered); see line 4

3)header class="panel--padded" (This provides the extra padding and is aligned left--no centering) line 9

4)header class="panel--padded--centered" (This provides the extra padding and is also centered). line 11

One note: the fourth option has to be stated in that order; panel--centered--padded doesn't work

Hope this helps.