Skip to content

Instantly share code, notes, and snippets.

@jgcarlson

jgcarlson/_variables.scss

Created March 14, 2019 16:14
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save jgcarlson/2b51ac441a2eda06629b7218d2cbf6ab to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save jgcarlson/2b51ac441a2eda06629b7218d2cbf6ab to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. jgcarlson created this gist Mar 14, 2019.
    28 changes: 28 additions & 0 deletions _variables.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,28 @@
    /* MEDIA QUERIES */

    $breakpoints: ( xs: 576px, sm: 768px, md: 992px, lg: 1200px);
    $bp-xs: map-get($breakpoints, xs); // < 576px
    $bp-sm: map-get($breakpoints, sm); // < 768px
    $bp-md: map-get($breakpoints, md); // < 992px
    $bp-lg: map-get($breakpoints, lg); // < 1200px
    $bp-xl: map-get($breakpoints, xl); // > 1200px
    // from 0 -> 575px
    @mixin mobile() {
    @media (max-width: $bp-xs - 1) {
    @content;
    }
    }

    // from 576px+
    @mixin tablet() {
    @media (min-width: $bp-xs) {
    @content;
    }
    }

    // from 1200px+
    @mixin desktop() {
    @media (min-width: $bp-lg) {
    @content;
    }
    }