This will allow you to use media queries easily and cleanly throughout your other SCSS files.
This is how it works. Throughout your .scss
files, use the @include
keyword with the mixin name to implement the media query in your scss code:
@include tablet {
width: 100%;
background-color: red;
}
This will convert to:
@media only screen and (min-width: #{$tablet}) {
width: 100%;
background-color: red;
}
You can embed these mixins inside class definitions. For example:
.example-class {
width: 100%;
@include desktop {
width: 50%;
}
}
Or you can use them outside of your class definitions and use definitions inside of them.
@include desktop {
.content {
width: 100%;
}
#example-id {
color: red;
}
}
These are really useful. By using them in your classes you can clean up your code and make it easier to read. For example wrapping css definitions in @include tablet-only
is a lot easier to read and understand than @media only screen and (min-width: #{$tablet}) and (max-width: #{$desktop - 1px})
.
Another huge benefit of this is that if you decide to change breakpoints down the road, you can change them in one location and all of your media queries will change across all your SCSS/Compiled CSS.
Lastly, this is better for working on a team because everyone can use the mixins and you don't have to risk someone using a different media query style or forgetting an important keyword like screen and
or something like that. It is easier to use mixins on a team than to look up the media queries your team uses.