re: Sass Mixins VIEW POST

FULL DISCUSSION
 

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.)

@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.

code of conduct - report abuse