Convert Font Size to rem

Hack or Fix 62 views
0
0 Flares 0 Flares ×

We often use the units of % or em to set font sizes. The rem font size unit is similar to em, only instead of cascading it’s always relative to the HTML element (root). That means that we can define a single font size on the html element and define all rem units to be a percentage of that. Maybe you’ve seen this units because WordPress default theme in 2012, Twenty Twelve is used it.

This has pretty good modern browser support, but it doesn’t support IE 8 and down. We need to provide px fallbacks for.

Define @mixin

@mixin fontsize($size: 24, $base: 16) {
  font-size: $size + px;
  font-size: ($size / $base) * 1rem;
}

Usage with @include

body {
     @include fontsize(12);
}

Output

body {
  font-size: 12px;
  font-size: 0.75rem;
}
Provided by: Web Creator Box
Tagged with: ,
Posted in Sass

Discuss:

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

No Trackbacks.

Login

Register | Lost your password?
0 Flares Twitter 0 Facebook 0 Google+ 0 0 Flares ×