CSS — Media queries in scss

#screen size

// Small tablets and large smartphones (landscape view)
$screen-sm-min: 576px;

// Small tablets (portrait view)
$screen-md-min: 768px;

// Tablets and small desktops
$screen-lg-min: 992px;

// Large tablets and desktops
$screen-xl-min: 1200px;

#mixins

// Small devices
@mixin sm {
   @media (min-width: #{$screen-sm-min}) {
       @content;
   }
}

// Medium devices
@mixin md {
   @media (min-width: #{$screen-md-min}) {
       @content;
   }
}

// Large devices
@mixin lg {
   @media (min-width: #{$screen-lg-min}) {
       @content;
   }
}

// Extra large devices
@mixin xl {
   @media (min-width: #{$screen-xl-min}) {
       @content;
   }
}

#using

.container {
    padding: 0 15px;
// 576px window width and more
    @include sm {
        padding: 0 20px;
    }
// 992px window width and more
    @include lg {
        margin-left: auto;
        margin-right: auto;
        max-width: 1100px;
    }
// 1400px window width and more
    @include rwd(1400) {
        margin-bottom: 20px;
        margin-top: 20px;
    }
}

#reference

http://thesassway.com/intermediate/responsive-web-design-in-sass-using-media-queries-in-sass-32

Breakpoints and media queries in SCSS

Useful Sass (SCSS) media query mixins for Bootstrap

• materializecss.com

https://materializecss.com/sass.html