Sass 101 - A newb's guide: Selector bubble up

selector_bubble_up.md

@media directives in Sass behave just like they do in plain CSS, with one extra capability: they can be nested in CSS rules.

If a @media directive appears within a CSS rule, it will be bubbled up to the top level of the stylesheet, putting all the selectors on the way inside the rule. This makes it easy to add media-specific styles without having to repeat selectors or break the flow of the stylesheet.

SCSS

.box {
  width: 800px;
  @media only screen and (max-width: 320px) {
    width: 97%;
  }
}

Sass

.box
  width: 800px
  @media only screen and (max-width: 320px)
    width: 97%

SassMeister Gist

selector_bubble_up.scss

.box {
  width: 800px;
  @media only screen and (max-width: 320px) {
    width: 97%;
  }
}