Using @at-root directory to break nested selectors out of media queries and into the root level

at-root.css

/* 
@at-root directory is a global sass function that allows @root can be called from
every nested media. @at-root refers to the base level so @at-root = the root that 
all media-queries are bound too. ie for every nested media query, this is the 
global style for them. NOW! we get to specify them in the latest Sass release, 
@at-root: allows us to jump out of our context this is great if you have one 
asset that needs to be different that than the others
*/
@media (min-width: 300px) {
  .my-widget .inside-mq {
    inside-style: mq;
  }
}
.my-widget .outside-mq {
  outside-style: mq;
}
.outside-class {
  color: blue;
}
@media (min-width: 300px) {
  .with-only {
    color: pink;
  }
}

at-root.scss

/* 
@at-root directory is a global sass function that allows @root can be called from
every nested media. @at-root refers to the base level so @at-root = the root that 
all media-queries are bound too. ie for every nested media query, this is the 
global style for them. NOW! we get to specify them in the latest Sass release, 
@at-root: allows us to jump out of our context this is great if you have one 
asset that needs to be different that than the others
*/   

.my-widget {
  @media (min-width: 300px) {
    .inside-mq {
      inside-style: mq;
    }
    @at-root (without: media){
      //this without:media tells the screen what to bust out of
      .outside-mq {
        outside-style: mq;
      }
    }
    // using (without:all) forces all nested selectors outside of all media
    // queries, hence color:blue only in the .outside-everything class in generated css
     @at-root (without:all){
        .outside-class {
          color: blue;
        }
      }
    
    // using the (with:media) keeps .with-only inside media query hence .with-only selector
    // inside @media ()min-width:300px
    @at-root (with: media) {
        .with-only {
          // do this ONLY inside mq
          color: pink;
        }
     }
    }
  }