Posted By

FrederickWeiss on 03/23/14


Tagged

SASS mixin breakpoints


Versions (?)

Responsive Breakpoints


 / Published in: CSS
 

  1. My most utilised mixin that I don’t think I could live without anymore. Just set your breakpoint at whatever width you desire and go crazy.
  2. //////////////////////////////////////////////////
  3.  
  4.  
  5. @mixin breakpoint($point) {
  6. @if $point == large {
  7. @media (min-width: 64.375em) { @content; }
  8. }
  9. @else if $point == medium {
  10. @media (min-width: 50em) { @content; }
  11. }
  12. @else if $point == small {
  13. @media (min-width: 37.5em) { @content; }
  14. }
  15. }
  16.  
  17.  
  18.  
  19.  
  20.  
  21. Usage:
  22. //////////////////////////////////////////////////
  23.  
  24. .page-wrap {
  25. width: 75%;
  26. @include breakpoint(large) { width: 60%; }
  27. @include breakpoint(medium) { width: 80%; }
  28. @include breakpoint(small) { width: 95%; }
  29. }

Report this snippet  

You need to login to post a comment.