Skip to content

Instantly share code, notes, and snippets.

@adamgavlak
Created November 21, 2016 22:51
Show Gist options
  • Save adamgavlak/d7d749b9709022eff831c7794acfb319 to your computer and use it in GitHub Desktop.
Save adamgavlak/d7d749b9709022eff831c7794acfb319 to your computer and use it in GitHub Desktop.
div
padding: 10px
@include for-size(desktop-up)
padding: 20px
@mixin for-size($size)
// Upper boundaries
$phone-upper-boundary: 600px
$tablet-portrait-upper-boundary: 900px
$tablet-landscape-upper-boundary: 1200px
$desktop-upper-boundary: 1800px
@if $size == phone-only
@media (max-width: #{$phone-upper-boundary - 1})
@content
@else if $size == tablet-portrait-up
@media (min-width: #{$phone-upper-boundary})
@content
@else if $size == tablet-portrait-only
@media (min-width: #{$phone-upper-boundary}) and (max-width: #{$tablet-portrait-upper-boundary - 1})
@content
@else if $size == tablet-landscape-up
@media (min-width: $tablet-portrait-upper-boundary)
@content
@else if $size == tablet-landscape-only
@media (min-width: $tablet-portrait-upper-boundary) and (max-width: #{$tablet-landscape-upper-boundary - 1})
@content
@else if $size == desktop-up
@media (min-width: $tablet-landscape-upper-boundary)
@content
@else if $size == desktop-only
@media (min-width: $tablet-landscape-upper-boundary) and (max-width: #{$desktop-upper-boundary - 1})
@content
@else if $size == bid-desktop-up
@media (min-width: $desktop-upper-boundary)
@content
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment