_media.scss 800 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445
  1. // ---------------------------------------------------------
  2. // MEDIA QUERIES
  3. // ---------------------------------------------------------
  4. @mixin mq($condition) {
  5. @media #{$condition} {
  6. @content;
  7. }
  8. }
  9. @mixin from($breakpoint) {
  10. @media screen and (min-width: $breakpoint){
  11. @content;
  12. }
  13. }
  14. @mixin to($breakpoint) {
  15. @media screen and (max-width: $breakpoint - 1px) {
  16. @content;
  17. }
  18. }
  19. @mixin between($start, $end){
  20. @media screen and (min-width: $start) and (max-width: $end - 1px) {
  21. @content;
  22. }
  23. }
  24. @mixin large($breakpoint){
  25. @media (min-width: $breakpoint){
  26. @content
  27. }
  28. }
  29. @mixin portrait($start, $end){
  30. @media (min-width: $start) and (max-width: $end) {
  31. @content
  32. }
  33. }
  34. @mixin landscape($breakpoint){
  35. @media (max-width: $breakpoint - 1px){
  36. @content
  37. }
  38. }