Skip to content

Instantly share code, notes, and snippets.

@FreshLondon

FreshLondon/_media_query_mixins.scss

Created March 13, 2019 06:43
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save FreshLondon/3806ececdd949a57d1fef60d7f2bd75d to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save FreshLondon/3806ececdd949a57d1fef60d7f2bd75d to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. FreshLondon created this gist Mar 13, 2019.
    104 changes: 104 additions & 0 deletions _media_query_mixins.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,104 @@
    //
    // MEDIA QUERIES
    //––––––––––––––––––––––––––––––––––––––––––––––––––

    // A map of breakpoints.
    $breakpoints: (
    xs: 576px,
    sm: 768px,
    md: 992px,
    lg: 1200px
    );


    //
    // RESPOND ABOVE
    //––––––––––––––––––––––––––––––––––––––––––––––––––

    // @include respond-above(sm) {}
    @mixin respond-above($breakpoint) {

    // If the breakpoint exists in the map.
    @if map-has-key($breakpoints, $breakpoint) {

    // Get the breakpoint value.
    $breakpoint-value: map-get($breakpoints, $breakpoint);

    // Write the media query.
    @media (min-width: $breakpoint-value) {
    @content;
    }

    // If the breakpoint doesn't exist in the map.
    } @else {

    // Log a warning.
    @warn 'Invalid breakpoint: #{$breakpoint}.';
    }
    }


    //
    // RESPOND BELOW
    //––––––––––––––––––––––––––––––––––––––––––––––––––

    // @include respond-below(sm) {}
    @mixin respond-below($breakpoint) {

    // If the breakpoint exists in the map.
    @if map-has-key($breakpoints, $breakpoint) {

    // Get the breakpoint value.
    $breakpoint-value: map-get($breakpoints, $breakpoint);

    // Write the media query.
    @media (max-width: ($breakpoint-value - 1)) {
    @content;
    }

    // If the breakpoint doesn't exist in the map.
    } @else {

    // Log a warning.
    @warn 'Invalid breakpoint: #{$breakpoint}.';
    }
    }


    //
    // RESPOND BETWEEN
    //––––––––––––––––––––––––––––––––––––––––––––––––––

    // @include respond-between(sm, md) {}
    @mixin respond-between($lower, $upper) {

    // If both the lower and upper breakpoints exist in the map.
    @if map-has-key($breakpoints, $lower) and map-has-key($breakpoints, $upper) {

    // Get the lower and upper breakpoints.
    $lower-breakpoint: map-get($breakpoints, $lower);
    $upper-breakpoint: map-get($breakpoints, $upper);

    // Write the media query.
    @media (min-width: $lower-breakpoint) and (max-width: ($upper-breakpoint - 1)) {
    @content;
    }

    // If one or both of the breakpoints don't exist.
    } @else {

    // If lower breakpoint is invalid.
    @if (map-has-key($breakpoints, $lower) == false) {

    // Log a warning.
    @warn 'Your lower breakpoint was invalid: #{$lower}.';
    }

    // If upper breakpoint is invalid.
    @if (map-has-key($breakpoints, $upper) == false) {

    // Log a warning.
    @warn 'Your upper breakpoint was invalid: #{$upper}.';
    }
    }
    }