Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Sass 101 - A newb's guide: 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.

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

.box {
width: 800px;
@media only screen and (max-width: 320px) {
width: 97%;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment