Modular CSS with Sass Modular Media Queries Challenge

Challenge Link:

http://teamtreehouse.com/library/modular-css-with-sass/modular-media-queries/modular-media-queries-challenge

Challenge Task 1 of 1

Add the statement that instructs @at-root to output the nested state rule outside the @media query.

What's messed up about this question is the phrase

"to output the nested state rule outside the"

If you were confused by what exactly this is asking (or talking about), you are not alone.

So, rather than try to review all the videos associated with 'Modular Media Queries' subsection of the 'Modular CSS with Sass' course I decided to re-phrase the questions as:

When using '@root' nested inside '@media',

what are the possible values that can appear in parenthesis

after @root (but on the same line as @root)

Using this as a google search criteria. I eventually found this github code page:

https://gist.github.com/gorillawit/8245799

Here is the relevant code from that page:

.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;
   }
  }
 }
}

Studying that code snippet, the 3 values that can appear in parenthesis after '@root' are:

• (with: media)
• (without: media)
• (without:all)

I tried all three and what passed was:

---

Somehow this course seems more 'advanced' than 'intermediate'.

Since '@root' was discussed in 'Advanced Directives' section

of the 'Advanced SASS' course:

http://teamtreehouse.com/library/advanced-sass/advanced-directives/the-atroot-directive

..I really think that Modular SASS belongs

AFTER that advanced course

(leastwise it wouldn't hurt to do the courses in that order...)