UX Design and Development course

Selector bubble up

@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.


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


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

SassMeister Gist