/* Media Queries */ $small: screen and (min-width: 0em); $medium: screen and (min-width: 40em) and (max-width: 4em); 4 $large: screen and (min-width: em); 5 6 @mixin for-size($size) { 7 @if $size == small { @media screen and (min-width: 40rem) { @content; } } @else if $size == medium { @media screen and (min-width: 64em) { @content; } } @else if $size == large { @media screen and (min-width: 75em) { @content; } } } /* // usage .my-box { padding: 10px;
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter