Skip to content

Instantly share code, notes, and snippets.

@eduardoboucas
Created January 4, 2016 14:58

Revisions

  1. eduardoboucas created this gist Jan 4, 2016.
    49 changes: 49 additions & 0 deletions SassMeister-input.scss
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,49 @@
    // ----
    // libsass (v3.3.2)
    // ----

    @import "include-media";

    $breakpoints:(
    'bp1': 375px,
    'bp2': 580px,
    'bp3': 768px,
    'bp4': 1024px
    );

    $num-breakpoints: length($breakpoints);

    @mixin hidden($type, $breakpoint) {
    .hidden--#{$type}-#{$breakpoint} {
    display: none;
    }
    }

    @for $i from 1 through $num-breakpoints {
    $breakpoint: nth($breakpoints, $i);
    $breakpoint-name: nth($breakpoint, 1);

    // For
    @if $i == $num-breakpoints {
    @include media('>=#{$breakpoint-name}') {
    @include hidden('for', $breakpoint-name);
    }
    } @else {
    $next-breakpoint: nth($breakpoints, $i + 1);
    $next-breakpoint-name: nth($next-breakpoint, 1);

    @include media('>=#{$breakpoint-name}', '<#{$next-breakpoint-name}') {
    @include hidden('for', $breakpoint-name);
    }
    }

    // From
    @include media('>=#{$breakpoint-name}') {
    @include hidden('from', $breakpoint-name);
    }

    // To
    @include media('<#{$breakpoint-name}') {
    @include hidden('upto', $breakpoint-name);
    }
    }
    71 changes: 71 additions & 0 deletions SassMeister-output.css
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,71 @@
    @media (min-width: 375px) and (max-width: 579px) {
    .hidden--for-bp1 {
    display: none;
    }
    }

    @media (min-width: 375px) {
    .hidden--from-bp1 {
    display: none;
    }
    }

    @media (max-width: 374px) {
    .hidden--upto-bp1 {
    display: none;
    }
    }

    @media (min-width: 580px) and (max-width: 767px) {
    .hidden--for-bp2 {
    display: none;
    }
    }

    @media (min-width: 580px) {
    .hidden--from-bp2 {
    display: none;
    }
    }

    @media (max-width: 579px) {
    .hidden--upto-bp2 {
    display: none;
    }
    }

    @media (min-width: 768px) and (max-width: 1023px) {
    .hidden--for-bp3 {
    display: none;
    }
    }

    @media (min-width: 768px) {
    .hidden--from-bp3 {
    display: none;
    }
    }

    @media (max-width: 767px) {
    .hidden--upto-bp3 {
    display: none;
    }
    }

    @media (min-width: 1024px) {
    .hidden--for-bp4 {
    display: none;
    }
    }

    @media (min-width: 1024px) {
    .hidden--from-bp4 {
    display: none;
    }
    }

    @media (max-width: 1023px) {
    .hidden--upto-bp4 {
    display: none;
    }
    }