Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----

@import "breakpoint";
$break: 32em;

// How to do media queries with nested selectors

// This way?

.selector {
  // default styles
  font-size: 1em;
  .nested-selector {
    // default styles
    font-size: 2em;
  }
  
  @include breakpoint($break) {
    // styles after the breakpoint
    font-size: 2em;
    .nested-selector {
      // styles after the breakpoint
      font-size: 4em;
    }
  }
}

// Or this way?

.selector1 {
  // default styles
  font-size: 1em;
  
  @include breakpoint($break) {
    // styles after the breakpoint
    font-size: 2em;
  }
  
  .nested-selector1 {
    //default styles
    font-size: 2em;
    
    @include breakpoint($break) {
      // styles after the breakpoint
      font-size: 4em;
    }
  }
}

// the output answered my own question. lol

SassMeister-output.css

.selector {
  font-size: 1em;
}
.selector .nested-selector {
  font-size: 2em;
}
@media (min-width: 32em) {
  .selector {
    font-size: 2em;
  }
  .selector .nested-selector {
    font-size: 4em;
  }
}

.selector1 {
  font-size: 1em;
}
@media (min-width: 32em) {
  .selector1 {
    font-size: 2em;
  }
}
.selector1 .nested-selector1 {
  font-size: 2em;
}
@media (min-width: 32em) {
  .selector1 .nested-selector1 {
    font-size: 4em;
  }
}