Skip to content

Instantly share code, notes, and snippets.

@Anderson-Juhasc
Last active May 2, 2018 17:00
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Anderson-Juhasc/350547234cc35940472845c64b8873cb to your computer and use it in GitHub Desktop.
Save Anderson-Juhasc/350547234cc35940472845c64b8873cb to your computer and use it in GitHub Desktop.
$breakpoints: "palm" "(max-width: 480px)", "lap" "(min-width: 481px)", "portable" "(max-width: 1023px)", "desk" "(min-width: 1024px)", "desk-wide" "(min-width: 1200px)" !default
=media-query($media-query)
$breakpoint-found: false
@each $breakpoint in $breakpoints
$name: nth($breakpoint, 1)
$declaration: nth($breakpoint, 2)
@if $media-query == $name and $declaration
$breakpoint-found: true
@media only screen and #{$declaration}
@content
@if $breakpoint-found == false
@warn "Breakpoint '#{$media-query}' does not exist"
$breakpoints = "palm" "(max-width: 480px)", "lap" "(min-width: 481px)", "portable" "(max-width: 1023px)", "desk" "(min-width: 1024px)", "desk-wide" "(min-width: 1200px)"
media-query($break)
for $breakpoint in $breakpoints
$name = $breakpoint[0]
$declaration = $breakpoint[1]
$expression = "only screen and " + $declaration
if $break == $name
@media $expression
{block}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment