Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="magic-blue-box">magic-blue-box</div>

SassMeister-input.scss

// ----
// Sass (v3.4.13)
// Compass (v1.0.3)
// ----

/* 
  Say you have two components in separate partials.
  Magic Blue Box extends Block.
  If _magic-blue-box.scss is included (say via Sass Globbing)
  before _block.scss in styles.scss, you need to 
  use !important to manually give priority to
  Magic Blue Box's overridding selectors.
  
  The Compass Import Once gem solves this problem.
  Not sure how to solve it in Libsass yet.
  
*/


/* _magic-blue-box.scss */

%magic-blue-box,
.magic-blue-box {
  @extend %block;
  color: blue !important;
}

/* _block.scss */

%block,
.block {
  width: 200px;
  height: 200px;
  padding: 1rem;
  background: rgba(blue, .1);
  color: transparent;
}

SassMeister-output.css

/* 
  Say you have two components in separate partials.
  Magic Blue Box extends Block.
  If _magic-blue-box.scss is included (say via Sass Globbing)
  before _block.scss in styles.scss, you need to 
  use !important to manually give priority to
  Magic Blue Box's overridding selectors.
  
  The Compass Import Once gem solves this problem.
  Not sure how to solve it in Libsass yet.
  
*/
/* _magic-blue-box.scss */
.magic-blue-box {
  color: blue !important;
}

/* _block.scss */
.magic-blue-box,
.block {
  width: 200px;
  height: 200px;
  padding: 1rem;
  background: rgba(0, 0, 255, 0.1);
  color: transparent;
}

SassMeister-rendered.html

<div class="magic-blue-box">magic-blue-box</div>