Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.4.4)
// Compass (v1.0.1)
// ----

@mixin desc($name) {
  @at-root &-#{$name} { @content; }
}

@mixin mod($name) {
  @at-root &--#{$name} { @content; }
}

.Component {
  height: 10rem;
  @include mod(red) { color: red; }
  @include mod(green) { color: green; }
  @include desc(header) { 
    height: 20rem;
    
    strong {
      color:black;
    }
  }
  
  // How do I make the header's strong red or green depending on the parent modifier
}

SassMeister-output.css

.Component {
  height: 10rem;
}
.Component--red {
  color: red;
}
.Component--green {
  color: green;
}
.Component-header {
  height: 20rem;
}
.Component-header strong {
  color: black;
}