Sass: @extend and child selectors

SassMeister-input-HTML.html

<div class="parent">
  parent
  <div class="child">child</div>
  <div class="child-foo">child-foo</div>
</div>

SassMeister-input.scss

// ----
// Sass (v3.3.8)
// Compass (v1.0.0.alpha.19)
// ----

.child {
  font-size: 2em;
  color: red;
}

.child-foo {
  @extend .child;
  color: blue;
}

.parent > .child {
    text-decoration: underline;
}

SassMeister-output.css

.child, .child-foo {
  font-size: 2em;
  color: red;
}

.child-foo {
  color: blue;
}

.parent > .child, .parent > .child-foo {
  text-decoration: underline;
}

SassMeister-rendered.html

<div class="parent">
  parent
  <div class="child">child</div>
  <div class="child-foo">child-foo</div>
</div>

The .parent > .child rule gets a .parent > .child-foo selector because of how @extend works.