Instance where placeholder extending failed due to compilation order

SassMeister-input.scss

// ----
// Sass (v3.4.9)
// Compass (v1.0.1)
// ----

$black: #000;
$gray-10: #121212;
$gray-20: #333;
$gray-30: #666;
$gray-40: #999;
$gray-45: #b3b3b3;
$gray-50: #ccc;
$gray-60: #e2e2e2;
$gray-70: #ebebeb;
$gray-80: #f3f3f3;
$gray-90: #f7f7f7;
$white: #fff;

$grid-unit: 45px;
$grid-unit-mini: 15px;
$grid-unit-micro: 7px;

@mixin root-selector-append ($selector) {

    @at-root #{selector-append($selector, &)} {
        @content
    }

}

@mixin box-shadow ($shadow...) {
    -webkit-box-shadow: $shadow;
    -moz-box-shadow: $shadow;
    box-shadow: $shadow;
}

@mixin span-max-width ($standard: 0, $mini: 0, $micro: 0) {
    $grid-units: (($standard * $grid-unit) + ($mini * $grid-unit-mini) + ($micro * $grid-unit-micro));
    max-width: $grid-units;
}

@mixin shell-wide-viewport {
    @include span-max-width(35, 2); // 1605 coincides with masthead max width
    @include box-shadow(-1px 0 4px 0 $gray-60);
    margin: 0 auto;
    border-right: 1px solid $gray-60;
    border-left: 1px solid $gray-60;
}

@mixin no-shell-wide-viewport {
    @include box-shadow(none);
    max-width: none;
    border-right: none;
    border-left: none;
}

%shell-wide-viewport {
    @include span-max-width(35, 2); // 1605 coincides with masthead max width
    @include box-shadow(-1px 0 4px 0 $gray-60);
    margin: 0 auto;
    border-right: 1px solid $gray-60;
    border-left: 1px solid $gray-60;
}

%no-shell-wide-viewport {
    @include box-shadow(none);
    max-width: none;
    border-right: none;
    border-left: none;
}

$timestamp: 012820015;
@mixin icon-dot-logo-7x7-00c800 {
    .has-svg & {
        background-image: url(/assets/article/#{$timestamp}/images/sprite/sprite-no-repeat.svg);
    }
    .has-no-svg & {
        background-image: url(/assets/article/#{$timestamp}/images/sprite/sprite-no-repeat.png);
    }
    background-repeat: no-repeat;
    background-position: 0 0;
    width: 7px;
    height: 7px;
}

%icon-dot-logo-7x7-00c800 {
  @include icon-dot-logo-7x7-00c800;
}

button {
  .icon {
    @extend %icon-dot-logo-7x7-00c800;
  }
}

.sections-button {
  .icon {
    @extend %icon-dot-logo-7x7-00c800;
  }
}

// responsive

// 1650

.viewport-large-70 {

    .shell {
        @include shell-wide-viewport;
    }

} // end viewport-large-70

.viewport-large-70 {

    .shell {
        @extend %no-shell-wide-viewport;
    }

} // end viewport-large-70

.viewport-large-70 {

    .shell {
        @include shell-wide-viewport;

        @include root-selector-append('.template-minimal, .has-cover-media') {
            @include no-shell-wide-viewport;
        }

    } // end shell

} // end viewport-large-70

SassMeister-output.css

.viewport-large-70 .shell {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  max-width: none;
  border-right: none;
  border-left: none;
}

button .icon, .sections-button .icon {
  background-repeat: no-repeat;
  background-position: 0 0;
  width: 7px;
  height: 7px;
}
.has-svg button .icon, button .has-svg .icon, .has-svg .sections-button .icon, .sections-button .has-svg .icon {
  background-image: url(/assets/article/12820015/images/sprite/sprite-no-repeat.svg);
}
.has-no-svg button .icon, button .has-no-svg .icon, .has-no-svg .sections-button .icon, .sections-button .has-no-svg .icon {
  background-image: url(/assets/article/12820015/images/sprite/sprite-no-repeat.png);
}

.viewport-large-70 .shell {
  max-width: 1605px;
  -webkit-box-shadow: -1px 0 4px 0 #e2e2e2;
  -moz-box-shadow: -1px 0 4px 0 #e2e2e2;
  box-shadow: -1px 0 4px 0 #e2e2e2;
  margin: 0 auto;
  border-right: 1px solid #e2e2e2;
  border-left: 1px solid #e2e2e2;
}

.viewport-large-70 .shell {
  max-width: 1605px;
  -webkit-box-shadow: -1px 0 4px 0 #e2e2e2;
  -moz-box-shadow: -1px 0 4px 0 #e2e2e2;
  box-shadow: -1px 0 4px 0 #e2e2e2;
  margin: 0 auto;
  border-right: 1px solid #e2e2e2;
  border-left: 1px solid #e2e2e2;
}
.template-minimal.viewport-large-70 .shell, .has-cover-media.viewport-large-70 .shell {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  max-width: none;
  border-right: none;
  border-left: none;
}

SassMeister-rendered.html

<div class="icon-google-oauth"></div>