diff options
Diffstat (limited to 'plugins/jetpack/scss/_utilities/mixins/_breakpoint.scss')
| -rw-r--r-- | plugins/jetpack/scss/_utilities/mixins/_breakpoint.scss | 46 |
1 files changed, 46 insertions, 0 deletions
diff --git a/plugins/jetpack/scss/_utilities/mixins/_breakpoint.scss b/plugins/jetpack/scss/_utilities/mixins/_breakpoint.scss new file mode 100644 index 00000000..80cf50f5 --- /dev/null +++ b/plugins/jetpack/scss/_utilities/mixins/_breakpoint.scss @@ -0,0 +1,46 @@ +// ========================================================================== +// Breakpoint Mixin +// +// Uses Sass Maps which requires Sass v3.3.0 or newer +// +// +// EXAMPLE +// +// body { +// @include breakpoint(tablet){ +// font-size: 14px; +// }; +// } + +// ========================================================================== + +// Add or remove breakpoints as you desire +$breakpoints:( + phone: 320px, + large-phone: 530px, + phablet: 600px, + tablet: 782px, + desktop: 900px, + large-desktop: 1147px, +); + +@mixin breakpoint($size){ + @each $breakpoint, $value in $breakpoints { + @if $size == $breakpoint { + @media (max-width: map-get($breakpoints, $breakpoint)){ + @content; + } + } + } +} + +// For mobile first +@mixin minbreakpoint($size){ + @each $breakpoint, $value in $breakpoints { + @if $size == $breakpoint { + @media (min-width: map-get($breakpoints, $breakpoint)){ + @content; + } + } + } +} |