DEV Community

Kashif Raza
Kashif Raza

Posted on

Mixin Approaches for Media Queries with Sass

Sass mixins give us the ability to create reusable chunks of code they reduce repetition, promote dry code & allow for ease of maintenance. Writing media queries as mixins to inject into your stylesheets, wherever they’re required — makes a whole lot of sense! Lets take a look at an example..

Setup mixins

@mixin for-size($size) {
@if $size == phone-only {
@media (max-width: 375px) { @content; }
}@else if $size == mobile-small {
@media (max-width: 480px) { @content; }
}@else if $size == max-mobile {
@media (max-width: 767px) { @content; }
}@else if $size == tablet-landscape-up {
@media (max-width: 991px) { @content; }
}@else if $size == tablet-landscape-up {
@media (max-width: 1024px) { @content; }
}@else if $size == desktop-up {
@media (max-width: 1200px) { @content; }
} @else if $size == big-desktop-up {
@media (min-width: 1600px) { @content; }
}
}

Using Mixin

.header-title {

font-size: 2rem;

@include for-size(phone-only) {

font-size: 1rem;
}
}

Top comments (0)