Craft Web Design + Development
Brendan McKeown

Hey there. I’m a front-end developer and web designer. I'm all about creating websites and web apps that look and perform flawlessly on any device using HTML, CSS, and Javascript. I enjoy utilizing libraries, frameworks and preprocessors that improve efficiency and reduce confusion.

Check out my resume.

D.R.Y. Breakpoints in SASS

In my opinion, I like to write breakpoints inline with my selectors when using SASS. This way, I don’t have to write the selector more than once, and styles for every breakpoint can be found in one place.

.my-class {
    width: 100%;
    @media (min-width: 481px) {
        width: 50%;
    }
}

But things can get out of hand quickly when you need to repeat this for multiple selectors. A good way around this to keep things clean is to create a mixin for your breakpoints. It’s quite simple and makes writing breakpoints even easier.

@mixin breakpoint($device) {
    @if $device == mobile {
        @media (max-width: 480px) { @content; }
    } @else if $device == desktop {
        @media (min-width: 481px) { @content; }
    }
}

Then you can keep your breakpoints inline with your selectors without repeating yourself.

.my-class {
    width: 100%;
    @include breakpoint(desktop) {
        width: 50%;
    }
}

But wait…I have to support IE 8! Add a boolean variable to either turn on or off media queries in the breakpoint mixin. Set this variable to true in your main stylesheet, and false in your lte IE 8 stylesheet.

// main.scss
$useMediaQueries: true;
@import 'helpers/mixins';

// lteIE8.scss
$useMediaQueries: false;
@import 'helpers/mixins';

// _mixins.scss
@mixin breakpoint($point) {
    @if ($useMediaQueries) {
        @if $point == mobile {
            @media (max-width: 480px) { @content; }
        } @else if $point == desktop {
            @media (min-width: 481px) { @content; }
        }
    } @else {
        @if $point == desktop {
            @content;
        }
    }
}