SASS Tweakpoint Mixin

Over the past few months I’ve prescribed more heavily to the method of creating tweakpoints rather than major breakpoints with media queries.

Over the past few months I’ve prescribed more heavily to the method of creating tweakpoints rather than major breakpoints with media queries.

I only modify the layout when it needs modifying and usually only have one major breakpoint jump (which is normally where the mobile nav expands, I call it $FULLFAT). The problem with this is that the old method of specifying a file for each breakpoint just doesn’t cut it any more.

At momentum we were really interested in using breakpoint which allowed you to specify media queries inline as and when you need them whilst still having a fallback for grandad IE. However, whilst giving it a go the current version had a crippling bug in it so we just made our own much simpler version.

Here’s the mixin:

First we create a mixin to output the media query with the desired breakpoint

@mixin breakpoint($point) {
    @media all and (min-width: $point) { @content; }
}

Then we detect if media queries are switched on, if they are the media query is created, if not the css rule is outputted without the media query and will overwrite any previous rule.

@mixin tweak($point){
    @if($media-queries){
        @include breakpoint($point){
            @content;
        }
    }
    @else if($media-queries == false){
        @content;
    }
}

In our variables file (or any high-level file) we turn the media queries on, and specify breakpoints if you wish.

$media-queries: true !default;
$FULLFAT: 768px;

And in our legacy IE stylesheet we turn off the media queries in the first line, but import all the same files as with the non-IE sass file.