Created
August 12, 2022 11:50
-
-
Save mityaua/6527ad7e4ed15fbb3d2ca2976224d7b0 to your computer and use it in GitHub Desktop.
SCSS breakpoints mixin
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @mixin for-size($range) { | |
| $mobile: 480px; | |
| $tablet: 768px; | |
| $desktop: 1280px; | |
| @if $range == mobile-only { | |
| @media screen and (max-width: #{$mobile - 1}) { @content; } | |
| } @else if $range == mobile { | |
| @media screen and (min-width: $mobile) { @content; } | |
| } @else if $range == tablet { | |
| @media screen and (min-width: $tablet) { @content; } | |
| } @else if $range == tablet-only { | |
| @media screen and (max-width: #{tablet - 1}) { @content; } | |
| } @else if $range == desktop { | |
| @media screen and (min-width: $desktop) { @content; } | |
| } @else if $range == desktop-only { | |
| @media screen and (max-width: #{$desktop - 1}) { @content; } | |
| } | |
| } | |
| // Usage | |
| .list { | |
| padding: 10px; | |
| @include for-size(desktop-only) { | |
| padding: 20px; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment