📐 Converting include-media breakpoints to em units

im-to-em.md

include-media — em units

Get include-media here.

If you're using include-media to manage your breakpoints, you might want to have it generate media queries in em units but still declare the breakpoints in px for convenience.

We decided not to add this to the library core, as it's outside the scope of the project, but you can achieve that with a tiny function:

@function im-to-em($breakpoints, $base-value: 16px) {
  $new-breakpoints: ();

  @each $name, $value in $breakpoints {
    $em-value: ($value / $base-value) * 1em;
    $new-breakpoints: map-merge($new-breakpoints, ($name: $em-value));
  }

  @return $new-breakpoints;
}

And then use it to define your breakpoints:

// Creating a new breakpoints map
$breakpoints: im-to-em((
  'small': 300px,
  'medium': 600px,
  'large': 1200px
));

// Converting an existing one
$breakpoints: im-to-em($breakpoints);

See it in action: http://www.sassmeister.com/gist/2236c831f75357005a4f16bd58da60c3

To learn more about the advantages of declaring media queries in em, see this post.