Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.3.10)
// Compass (v1.0.0.alpha.20)
// ----

/* 0: これだとBlockの子要素になっちゃう */
.list {
  %list__item {
    background: limegreen;
  }
  &__item--mod1 { @extend %list__item; color: salmon; }
  &__item--mod2 { @extend %list__item; color: chocolate; }
}

/* 1: PlaceholderをBlockの外に書くパターン */
%list-item {
  background: tomato;
}
.list {
  &__item { @extend %list-item; }
  &__item--mod1 { @extend %list-item; color: salmon; }
  &__item--mod2 { @extend %list-item; color: chocolate; }
}

/* 2: @at-rootを使ってPlaceholderをBlockの外に出すパターン */
.list {
  @at-root {
    %list__item {
      background: plum;
    }
  }

  &__item--mod1 { @extend %list__item; color: salmon; }
  &__item--mod2 { @extend %list__item; color: chocolate; }
}


/* 3: @at-rootを使ってPlaceholderをBlockの外に出した上で、class(Element)と書き方を揃えるパターン */
.list {
  @at-root {
    %list__item {
      background: plum;
    }
    &__item--mod1 { @extend %list__item; color: salmon; }
    &__item--mod2 { @extend %list__item; color: chocolate; }
  }
}

SassMeister-output.css

@charset "UTF-8";
/* 0: これだとBlockの子要素になっちゃう */
.list .list__item--mod1, .list .list__item--mod2 {
  background: limegreen;
}
.list__item--mod1 {
  color: salmon;
}
.list__item--mod2 {
  color: chocolate;
}

/* 1: PlaceholderをBlockの外に書くパターン */
.list__item, .list__item--mod1, .list__item--mod2 {
  background: tomato;
}

.list__item--mod1 {
  color: salmon;
}
.list__item--mod2 {
  color: chocolate;
}

/* 2: @at-rootを使ってPlaceholderをBlockの外に出すパターン */
.list__item--mod1, .list__item--mod2 {
  background: plum;
}
.list__item--mod1 {
  color: salmon;
}
.list__item--mod2 {
  color: chocolate;
}

/* 3: @at-rootを使ってPlaceholderをBlockの外に出した上で、class(Element)と書き方を揃えるパターン */
.list__item--mod1, .list__item--mod2 {
  background: plum;
}

.list__item--mod1 {
  color: salmon;
}

.list__item--mod2 {
  color: chocolate;
}