Skip to content

Instantly share code, notes, and snippets.

@DracoBlue
Last active December 20, 2021 14:12

Revisions

  1. DracoBlue revised this gist Jul 4, 2014. 1 changed file with 26 additions and 24 deletions.
    50 changes: 26 additions & 24 deletions _respond-to.scss
    Original file line number Diff line number Diff line change
    @@ -1,26 +1,28 @@
    @mixin respond-to($medias...) {
    $breakpoints_length: length($respond-to-breakpoints);

    @each $media in $medias {
    $had_a_hit: false;
    @for $i from 1 through $breakpoints_length {
    $breakpoint: nth($respond-to-breakpoints, $i);
    @if $media == nth($breakpoint, 1) {
    $definition: nth($breakpoint, 2);
    $had_a_hit: true;
    @media #{$definition} {
    @content;
    }
    }
    }
    @if $media == $respond-to-no-mediaqueries-fallback {
    .#{$respond-to-fallback-class} & {
    @content;
    }
    }

    @if $had_a_hit == false {
    @warn "Media #{media} not found!";
    }
    }
    $breakpoints-length: length($respond-to-breakpoints);

    @each $media in $medias {
    $had-a-hit: false;

    @for $i from 1 through $breakpoints-length {
    $breakpoint: nth($respond-to-breakpoints, $i);
    @if $media == nth($breakpoint, 1) {
    $definition: nth($breakpoint, 2);
    $had-a-hit: true;
    @media #{$definition} {
    @content;
    }
    }
    }

    @if $media == $respond-to-no-mediaqueries-fallback {
    .#{$respond-to-fallback-class} & {
    @content;
    }
    }

    @if $had-a-hit == false {
    @warn "Media #{media} not found!";
    }
    }
    }
  2. DracoBlue revised this gist Jul 3, 2014. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion usage.scss
    Original file line number Diff line number Diff line change
    @@ -3,7 +3,7 @@ $respond-to-fallback-class: lt-ie9;
    $respond-to-breakpoints: (
    desktop "(min-width: 721px)",
    pad "(min-width: 321px) and (max-width: 720px)",
    mobile "(max-width: 320px)",
    mobile "(max-width: 320px)"
    );


  3. DracoBlue revised this gist Jan 19, 2014. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions _respond-to.scss
    Original file line number Diff line number Diff line change
    @@ -4,7 +4,7 @@
    @each $media in $medias {
    $had_a_hit: false;
    @for $i from 1 through $breakpoints_length {
    $breakpoint: nth($breakpoints, $i);
    $breakpoint: nth($respond-to-breakpoints, $i);
    @if $media == nth($breakpoint, 1) {
    $definition: nth($breakpoint, 2);
    $had_a_hit: true;
    @@ -13,7 +13,7 @@
    }
    }
    }
    @if $media == $no-mediaqueries-fallback {
    @if $media == $respond-to-no-mediaqueries-fallback {
    .#{$respond-to-fallback-class} & {
    @content;
    }
  4. DracoBlue created this gist Jan 15, 2014.
    26 changes: 26 additions & 0 deletions _respond-to.scss
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,26 @@
    @mixin respond-to($medias...) {
    $breakpoints_length: length($respond-to-breakpoints);

    @each $media in $medias {
    $had_a_hit: false;
    @for $i from 1 through $breakpoints_length {
    $breakpoint: nth($breakpoints, $i);
    @if $media == nth($breakpoint, 1) {
    $definition: nth($breakpoint, 2);
    $had_a_hit: true;
    @media #{$definition} {
    @content;
    }
    }
    }
    @if $media == $no-mediaqueries-fallback {
    .#{$respond-to-fallback-class} & {
    @content;
    }
    }

    @if $had_a_hit == false {
    @warn "Media #{media} not found!";
    }
    }
    }
    27 changes: 27 additions & 0 deletions usage.scss
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,27 @@
    $respond-to-no-mediaqueries-fallback: desktop;
    $respond-to-fallback-class: lt-ie9;
    $respond-to-breakpoints: (
    desktop "(min-width: 721px)",
    pad "(min-width: 321px) and (max-width: 720px)",
    mobile "(max-width: 320px)",
    );



    @import "_respond-to";


    .my-class {

    @include respond-to(desktop, pad) {
    color: #ff0;
    }

    @include respond-to(mobile) {
    color: #f0f;
    }

    font-size: 12px;

    }