I like to generalize breakpoint mixins a little further. For example, I'll define these variables:
$breakpoint__tablet-portrait: 600px; $breakpoint__tablet-landscape: 900px; $breakpoint__desktop: 1200px;
And I'll define mixins for both min-width and max-width. (I try not to use min-width, since I prefer to build for mobile first and add breakpoints as the screen size increases.)
min-width
max-width
@mixin min-width($breakpoint) { @media screen and (min-width: $breakpoint) { @content; } } @mixin max-width($breakpoint) { @media screen and (max-width: $breakpoint) { @content; } }
Disclaimer: yes, I'm still using pixel sizes for breakpoints. I really shouldn't, though. I like how your example uses ems.
Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink.
Hide child comments as well
Confirm
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
I like to generalize breakpoint mixins a little further. For example, I'll define these variables:
And I'll define mixins for both
min-width
andmax-width
. (I try not to use min-width, since I prefer to build for mobile first and add breakpoints as the screen size increases.)Disclaimer: yes, I'm still using pixel sizes for breakpoints. I really shouldn't, though. I like how your example uses ems.