DEV Community

Sass Mixins

Nesha Zoric on March 20, 2018

This is the third post about specific Sass features and this one is about mixins. Previous I wrote about import feature and extend feature and ther...
Read full post
Collapse
 
peiche profile image
Paul •

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.