Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.3.1)
// Compass (v1.0.0.alpha.18)
// ----

%hoge {
  display: block;
  %bar {
    color: green;
  }
}

// キモい
.hoge {
  @extend %hoge;
}

.bar {
  @extend %bar;
}

// まあわかる
.hoge-2 {
  @extend %hoge;
  .bar-2 {
    @extend %bar;
  }
}

// こういうこともできるのかしら

%ex {
  color: red;
  %ex__item {
    color: blue;
  }
}

.ex1 {
  @extend %ex;
  & > item {
    @extend %ex__item;
  }
}

.ex2 {
  @extend %ex;
}

// この場合、.ex1, .ex2 の子要素として生成される
.ex2__item {
  @extend %ex__item;
}

// 更に試そうか
.ex3 {
  @extend %ex;
  // こうすると、.ex1, .ex2, .ex3の子要素として.ex__item3が生成される
  &__item {
    @extend %ex__item;
  }
}

/*.ex4 { color: red; }
 *.ex4 .ex4__item { color: blue; }
 *ってするには
 */
 %ex2 {
  color: red;
  %ex2__item {
    color: blue;
  }
  %ex2__content {
    color: green;
  }
}
.ex4 {
  @extend %ex2;
  
  & &__item {
    @extend %ex2__item;
  }
  & &__content {
    @extend %ex2__content
  }
}

%ex3 {
  color: red;
  &__item {
    color: blue;
  }
  &__content {
    color: green;
  }
}
.ex5 {
  @extend %ex3;
  
  &__item {
    @extend %ex3__item;
  }
  &__content {
    @extend %ex3__content
  }
}

SassMeister-output.css

@charset "UTF-8";
.hoge, .hoge-2 {
  display: block;
}
.hoge .bar, .hoge-2 .bar, .hoge-2 .bar-2 {
  color: green;
}

.ex1, .ex2, .ex3 {
  color: red;
}
.ex1 > item, .ex1 .ex2__item, .ex2 .ex2__item, .ex3 .ex2__item, .ex1 .ex3__item, .ex2 .ex3__item, .ex3 .ex3__item {
  color: blue;
}

/*.ex4 { color: red; }
 *.ex4 .ex4__item { color: blue; }
 *ってするには
 */
.ex4 {
  color: red;
}
.ex4 .ex4__item {
  color: blue;
}
.ex4 .ex4__content {
  color: green;
}

.ex5 {
  color: red;
}
.ex5__item {
  color: blue;
}
.ex5__content {
  color: green;
}