Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- @mixin for-size($range) {
- $phone-upper-boundary: 600px;
- $tablet-portrait-upper-boundary: 900px;
- $tablet-landscape-upper-boundary: 1200px;
- $desktop-upper-boundary: 1800px;
- @if $range == phone-only {
- @media (max-width: #{$phone-upper-boundary - 1}) { @content; }
- } @else if $range == tablet-portrait-up {
- @media (min-width: $phone-upper-boundary) { @content; }
- } @else if $range == tablet-landscape-up {
- @media (min-width: $tablet-landscape-upper-boundary) { @content; }
- } @else if $range == desktop-up {
- @media (min-width: $tablet-landscape-upper-boundary) { @content; }
- } @else if $range == big-desktop-up {
- @media (min-width: $desktop-upper-boundary) { @content; }
- }
- }
- // usage
- .my-box {
- padding: 10px;
- @include for-size(desktop-up) {
- padding: 20px;
- }
- }
Add Comment
Please, Sign In to add comment