Christopher Kollars

Sass map and my breakpoints

My most recent project I decided to use Sass maps. It all started from an article in which I basically took the example and applied it to my project.

It's been really useful. I can see setting up a config file with a huge map of all your variables, colors, breakpoints and so on. For now though here is the what I used for my breakpoints and it's mixin if you didn't read the article.

In my _variables.scss I declare my breakpoint Sass map.

$breakpoints: (
    "mobile": (
        max-width: 767px,
    ),
    "small": (
        min-width: 768px,
    ),
    "medium": (
        min-width: 960px,
    ),
    "large": (
        min-width: 1200px,
    ),
);

Then in my _mixins.scss I have this nice little function called respond-to() that I use to filter through my map.

@mixin respond-to($name) {
    $value: map-get($breakpoints, $name);

    @if map-has-key($breakpoints, $name) {
        @media #{inspect(map-get($breakpoints, $name))} {
            @content;
        }
    } @else {
        @warn "Unfortunately, no value could be retrieved from '#{$name}'. "
        + "Please make sure it is defined in '$breakpoints' map.";
    }
}

Now whenever I need to define a breakpoint in one of my styles I just include my mixin.

.class-name {
    width: 100%;

    @include respond-to(medium) {
        width: 60%;
    }
}

Then you end up with this css.

.class-name {
    width: 100%;
}
@media (min-width: 960px) {
    .class-name {
        width: 60%;
    }
}