Mixin for SCSS to efficiently specify “media queries” with a large amount of code description

2019.6.7

Here’s a note on how to specify media queries efficiently.

Media queries are useful, but the amount of description is just too long! So I try to make the description as short as possible in this way.

Minin code

Each number is consistent with Bootstrap’s switching numbers. It’s probably best to get wrapped up in the longest one, W

 @mixin mq($breakpoint: medium) {
    @if $breakpoint == xs {
        @media screen and (min-width: 576px) {
            @content;
        }
    } @else if $breakpoint == sm {
        @media screen and (min-width: 768px) {
            @content;
        }
    } @else if $breakpoint == md {
        @media screen and (min-width: 992px) {
            @content;
        }
    } @else if $breakpoint == lg {
        @media screen and (min-width: 1200px) {
            @content;
        }
    } @else if $breakpoint == xl {
        @media screen and (max-width: 1201px) {
            @content;
        }
    }
}

When you use it, do the following.

 @include mq('sm'){
    // Here's the style
}

Conclusion

When using this mixin, instead of using separate SCSS files for the PC and the phone, you have to write them all in one It is recommended to put away.

This is because this makes it easier to find the right place to search when you want to modify the code.