Created
July 4, 2015 09:28
-
-
Save eduardoboucas/40e0d9d5d6ceaf958d45 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains hidden or 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
| // ---- | |
| // Sass (v3.4.14) | |
| // Compass (v1.0.3) | |
| // Include Media (v1.3.0) | |
| // ---- | |
| @import "include-media"; | |
| // The breakpoint we want to emulate | |
| $im-no-media-breakpoint: 'desktop'; | |
| // The media expressions allowed | |
| $im-no-media-expressions: ('screen'); | |
| @function _im-no-media-show($conditions...) { | |
| $show: true; | |
| $no-media-breakpoint-value: map-get($breakpoints, $im-no-media-breakpoint); | |
| @each $condition in $conditions { | |
| @if $show { | |
| @if not map-has-key($media-expressions, $condition) { | |
| $operator: get-expression-operator($condition); | |
| $prefix: get-expression-prefix($operator); | |
| $value: get-expression-value($condition, $operator); | |
| @if ($prefix == 'max' and $value <= $no-media-breakpoint-value) or | |
| ($prefix == 'min' and $value > $no-media-breakpoint-value) { | |
| $show: false; | |
| } | |
| } @else { | |
| @if not index($im-no-media-expressions, $condition) { | |
| $show: false; | |
| } | |
| } | |
| } | |
| } | |
| @return $show; | |
| } | |
| @mixin media($conditions...) { | |
| @if _im-no-media-show($conditions...) { | |
| @content; | |
| } | |
| } | |
| // ----- Demo ----- | |
| // This one is greater than our breakpoint, | |
| // so we'll ignore it. | |
| @include media('>=desktop') { | |
| .foo { | |
| color: tomato; | |
| } | |
| } | |
| // This one spans our breakpoint, so we'll | |
| // unwrap it and show its contents | |
| @include media('>=phone', '<desktop') { | |
| .bar { | |
| color: blue; | |
| } | |
| } | |
| // This one won't be displayed because it | |
| // contains a forbidden media expression | |
| @include media('>=phone', 'retina2x') { | |
| .baz { | |
| color: pink; | |
| } | |
| } |
This file contains hidden or 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
| .foo { | |
| color: tomato; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment