_breakpoint.scss 747 B

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
  1. // Small tablets and large smartphones (landscape view)
  2. $screen-sm-min: 576px;
  3. // Small tablets (portrait view)
  4. $screen-md-min: 769px;
  5. // Tablets and small desktops
  6. $screen-lg-min: 992px;
  7. // Large tablets and desktops
  8. $screen-xl-min: 1200px;
  9. /**
  10. * Breakpoint mixins
  11. **/
  12. // Small devices
  13. @mixin sm {
  14. @media (max-width: #{$screen-sm-min}) {
  15. @content;
  16. }
  17. }
  18. // Medium devices
  19. @mixin md {
  20. @media (min-width: #{$screen-md-min}) {
  21. @content;
  22. }
  23. }
  24. // Large devices
  25. @mixin lg {
  26. @media (min-width: #{$screen-lg-min}) {
  27. @content;
  28. }
  29. }
  30. // Extra large devices
  31. @mixin xl {
  32. @media (min-width: #{$screen-xl-min}) {
  33. @content;
  34. }
  35. }
  36. // Custom devices
  37. @mixin rwd($screen) {
  38. @media (min-width: $screen+'px') {
  39. @content;
  40. }
  41. }