Media query mixin
SCSS
@mixin mq-s() { @media all and (max-width: $breakpoint-small) { @content; } } @mixin mq-m() { @media all and (max-width: $breakpoint-medium) { @content; } } @mixin mq-l() { @media all and (max-width: $breakpoint-large) { @content; } } @mixin mq-xl() { @media all and (max-width: $breakpoint-xlarge) { @content; } } @mixin mq($size){ @media all and (max-width: rem($size)) { @content; } } @mixin mq-min($size){ @media all and (min-width: rem($size)) { @content; } } @mixin mq-range($size1,$size2){ @media all and (max-width: rem($size1)) and (min-width: rem($size2)) { @content; } } // example @include mq-s(){ div {display: none;} }