Skip to content

Instantly share code, notes, and snippets.

@eduardoboucas
Created July 4, 2015 09:28
Show Gist options
  • Select an option

  • Save eduardoboucas/40e0d9d5d6ceaf958d45 to your computer and use it in GitHub Desktop.

Select an option

Save eduardoboucas/40e0d9d5d6ceaf958d45 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// 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;
}
}
.foo {
color: tomato;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment