Generated by SassMeister.com.

SassMeister-input.scss

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

/*----example1----*/

%example {
  color: red;
  %element {
    color: green;
  }
}

/*
%example {
  color: red;
}
%example %element{
  color: green;
}
になるので…
%elementをextendしたセレクタは、
%exampleをextendしてるセレクタの子孫要素として展開されるはず…
*/

.example {
  @extend %example;
}

.element{
  @extend %element;
}


/*----example2----*/

%example2 {
  color: red;
  &__element {
    color: blue;
  }
}

/*
この場合
%example2 {
  color: red;
}
%example2__element {
  color: blue;
}
となるので、
%example2__elementをextendしても%example2の影響を受けずに展開されるはず…
*/
.example2 {
  @extend %example2;
}
.element2 {
  @extend %example2__element;
}

/*----example3----*/

%example3 {
  color: red;
  %example3__element {
    color: blue;
    &:hover {
      text-decoration: underline;
    }
    &.is-state {
      display: none;
    }
    &--modifier {
      color:yellow;
    }
  }
}

/*
%example3 {
  color: red;
}
%example3 %example3__element {
  color: blue;
}
%example3 %example3__element:hover {
  text-decoration: underline;
}
%example3 %example3__element.is-state {
  display: none;
}
%example3 %example3__element--modifier {
  color: yellow;
}
なので、以下のようにextendした場合"modifier"だけは展開されないはず…
*/
.example3 {
  @extend %example3;
}
.example3__element {
  @extend %example3__element;
}

/*----example4----*/

%example4 {
  color: red;
  %example4__element {
    color: blue;
  }
}

/*
この場合は、extendする側が"&"で階層を上がったところで、
%example4 %example4__element {}の呪縛から逃れることはできないので、
%example4の子孫要素として展開されるはず…
*/

.example4 {
  @extend %example4;
  &__element {
    @extend %example4__element;
  }
}

/*----example5----*/

/*
以下はどちらもplaceholderとextendする側の構造が一緒なので、見たまんまのはず…
*/
%example5-1 {
  color: red;
  %example5-1__element {
    color: blue;
  }
}

.example5-1 {
  @extend %example5-1;
  .example5-1__element {
    @extend %example5-1__element;
  }
}

%example5-2 {
  color: red;
  &__element {
    color: blue;
  }
}

.example5-2 {
  @extend %example5-2;
  &__element {
    @extend %example5-2__element;
  }
}

SassMeister-output.css

@charset "UTF-8";
/*----example1----*/
.example {
  color: red;
}
.example .element {
  color: green;
}

/*
%example {
  color: red;
}
%example %element{
  color: green;
}
になるので…
%elementをextendしたセレクタは、
%exampleをextendしてるセレクタの子孫要素として展開されるはず…
*/
/*----example2----*/
.example2 {
  color: red;
}
.element2 {
  color: blue;
}

/*
この場合
%example2 {
  color: red;
}
%example2__element {
  color: blue;
}
となるので、
%example2__elementをextendしても%example2の影響を受けずに展開されるはず…
*/
/*----example3----*/
.example3 {
  color: red;
}
.example3 .example3__element {
  color: blue;
}
.example3 .example3__element:hover {
  text-decoration: underline;
}
.example3 .is-state.example3__element {
  display: none;
}
/*
%example3 {
  color: red;
}
%example3 %example3__element {
  color: blue;
}
%example3 %example3__element:hover {
  text-decoration: underline;
}
%example3 %example3__element.is-state {
  display: none;
}
%example3 %example3__element--modifier {
  color: yellow;
}
なので、以下のようにextendした場合"modifier"だけは展開されないはず…
*/
/*----example4----*/
.example4 {
  color: red;
}
.example4 .example4__element {
  color: blue;
}

/*
この場合は、extendする側が"&"で階層を上がったところで、
%example4 %example4__element {}の呪縛から逃れることはできないので、
%example4の子孫要素として展開されるはず…
*/
/*----example5----*/
/*
以下はどちらもplaceholderとextendする側の構造が一緒なので、見たまんまのはず…
*/
.example5-1 {
  color: red;
}
.example5-1 .example5-1__element {
  color: blue;
}

.example5-2 {
  color: red;
}
.example5-2__element {
  color: blue;
}