_breakpoint.scss 902 B

12345678910111213141516171819202122232425262728293031323334353637383940414243444546
  1. // ==========================================================================
  2. // Breakpoint Mixin
  3. //
  4. // Uses Sass Maps which requires Sass v3.3.0 or newer
  5. //
  6. //
  7. // EXAMPLE
  8. //
  9. // body {
  10. // @include breakpoint(tablet){
  11. // font-size: 14px;
  12. // };
  13. // }
  14. // ==========================================================================
  15. // Add or remove breakpoints as you desire
  16. $breakpoints:(
  17. phone: 320px,
  18. large-phone: 530px,
  19. phablet: 600px,
  20. tablet: 782px,
  21. desktop: 900px,
  22. large-desktop: 1147px,
  23. );
  24. @mixin breakpoint($size){
  25. @each $breakpoint, $value in $breakpoints {
  26. @if $size == $breakpoint {
  27. @media (max-width: map-get($breakpoints, $breakpoint)){
  28. @content;
  29. }
  30. }
  31. }
  32. }
  33. // For mobile first
  34. @mixin minbreakpoint($size){
  35. @each $breakpoint, $value in $breakpoints {
  36. @if $size == $breakpoint {
  37. @media (min-width: map-get($breakpoints, $breakpoint)){
  38. @content;
  39. }
  40. }
  41. }
  42. }