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