Skip to content

Instantly share code, notes, and snippets.

@joseluis
Last active August 29, 2015 14:15
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 joseluis/b8d043d1db7a3bf54def to your computer and use it in GitHub Desktop.
Save joseluis/b8d043d1db7a3bf54def to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// Include Media (v1.1.2)
// ----
@import "include-media";
// new media mixin, supporting simple lists as parameters
@mixin media($conditions...) {
$conditions_parsed: ();
@for $i from 1 through length($conditions) {
@if type_of(nth($conditions, $i )) == 'list' {
@for $li from 1 through length(nth($conditions, $i )) {
$conditions_parsed: append($conditions_parsed, parse-expression(nth(nth($conditions, $i), $li)));
}
}
@else {
$conditions_parsed: append($conditions_parsed, parse-expression(nth($conditions, $i)));
}
}
$branches: get-query-branches($conditions_parsed);
$query: '';
@each $branch in $branches {
@if (str-length($query) != 0) {
$query: $query + ', ';
}
$query: $query + $branch;
}
@media #{$query} {
@content;
}
}
// TEST CASE
$lap: ">phone", "<=tablet";
.selector2 {
color: #bada55;
@include media($lap, "retina2x") {
color: #b000b5;
}
}
.selector2 {
color: #bada55;
}
@media (min-width: 321px) and (max-width: 768px) and (-webkit-min-device-pixel-ratio: 2), (min-width: 321px) and (max-width: 768px) and (min-resolution: 192dpi) {
.selector2 {
color: #b000b5;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment