| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546 |
- // ==========================================================================
- // 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;
- }
- }
- }
- }
|