CSS Sass Basics Write Smart and Efficient CSS with Sass Nesting Media Queries

Nesting Media queries outputs different CSS compared to nesting selectors.

So, when you nest a media querie.

.intro { @media (min-width: 992px) { width: 45&; } }

It outputs this on the CSS

@media (min-width: 992px) { . intro { width: 45%; } }

Why It doesn't outputs the code the same way like when you nest selectors? something like this:

intro @media () {

}

It's a ''special'' thing that SASS do only with the media queries or Im missing something?