Skip to content

Instantly share code, notes, and snippets.

@eduardoboucas
Last active February 15, 2023 02:56
Show Gist options
  • Save eduardoboucas/84144cd85cbd2ad4db1ca8b902585ca0 to your computer and use it in GitHub Desktop.
Save eduardoboucas/84144cd85cbd2ad4db1ca8b902585ca0 to your computer and use it in GitHub Desktop.
πŸ“ Converting include-media breakpoints to em units

'At' sign

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment