Simplify Sass include (uses sass maps) possible?

[nilsdannemann]

Situation

Im working on some includes that let me place mediaqueries more easily.

The include in this case would look like this:

@include respond-at(xl) {
    styles here
}

The desired output should look like this:

only screen and (max-width: 1180px) and (min-width: 960px) {
    styles here
}

Approach

To achieve this I use maps and some @if else rules.
Here’s a pen to see the code:
http://codepen.io/NilsDannemann/pen/wMPmQJ?editors=010

It works as intended, but its obviously very repetitive.
Does anyone know how to simplify this?

I’m grateful for any kind of help :-)

[Ilan Firsov]

I tried my hand with it. Note that I am pretty new to SASS so maybe it’s not the best way to do this. In any case it seems to do the job.

@mixin respond-at($name) {
  $index: index(map_keys($breakpoints), $name);

  @if map-has-key($breakpoints, $name) {
    @if $index == length($breakpoints) {
      @media only screen and (min-width: map-get($breakpoints, $name)) {
        @content;
      }
    } @else {
      @media only screen and (min-width: map-get($breakpoints, $name)) and (max-width: nth(map_values($breakpoints), ( $index + 1 ))) {
        @content;
      }
    }
  }
}

[nilsdannemann]

Hey Ilan,

thanks a ton!!
Works like a charm!
I totally wasn’t thinking about $index == length($breakpoints). Good solution :) Many thanks!

[Author]

Posts