Created
June 20, 2015 14:55
-
-
Save BPScott/f62af4633aa6ba90fc13 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
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
| // ---- | |
| // libsass (v3.2.5) | |
| // ---- | |
| // An example of adding named ranges support to Sass-mq | |
| @import "mq"; | |
| // These are the mq defaults but, we'll add them here | |
| // so you can easily see what is going on | |
| $mq-breakpoints: ( | |
| mobile: 320px, | |
| tablet: 740px, | |
| ) !default; | |
| // A map containg common argument lists that you want to pass to the mq mixin | |
| // This would be empty by default | |
| $mq-ranges: ( | |
| mobile-and-up: (from: mobile), | |
| mobile-until-tablet: (from: mobile, until: tablet), | |
| complex-thing: (from: tablet, and: '(orientation: landscape)', media-type: screen) | |
| ); | |
| // The actual range mixin! | |
| // We're defering all the complicated stuff to the mq mixin, this is meerly a | |
| // way of defining common argument groupings | |
| @mixin mq-range($name, $ranges: $mq-ranges) { | |
| @if map-has-key($ranges, $name) { | |
| @include mq(map-get($ranges, $name)...) { | |
| @content | |
| } | |
| } @else { | |
| @warn "Range #{$name} wasn't found in $ranges."; | |
| } | |
| } | |
| // Thrown in as a compliment to mq-add-breakpoint | |
| @mixin mq-add-range($name, $args) { | |
| $new-range: ($name: $args); | |
| $mq-ranges: map-merge($mq-ranges, $new-range) !global; | |
| } | |
| ////////////////////////////////////////////// | |
| // Usage examples | |
| ////////////////////////////////////////////// | |
| // Equivalent to calling mq($from: mobile) | |
| @include mq-range(mobile-and-up) { | |
| body { content: 'mobile->*'; } | |
| } | |
| // Equivalent to calling mq($from: mobile, $until: tablet) | |
| @include mq-range(mobile-until-tablet) { | |
| body { content: 'mobile->tablet'; } | |
| } | |
| // Equivalent to calling mq($from: tablet, $and: '(orientation: landscape)', $media-type: screen) | |
| @include mq-range(complex-thing) { | |
| body { content: 'complex thing'; } | |
| } | |
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
| @media (min-width: 20em) { | |
| body { | |
| content: 'mobile->*'; | |
| } | |
| } | |
| @media (min-width: 20em) and (max-width: 46.24em) { | |
| body { | |
| content: 'mobile->tablet'; | |
| } | |
| } | |
| @media screen and (min-width: 46.25em) and (orientation: landscape) { | |
| body { | |
| content: 'complex thing'; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment