Stylus PX to REM Mixin

By  on  

The REM unit is the hottest thing since Christina Ricci ... it's hot.  And it's especially hot when it comes to font size.  Rather than paraphrase a bunch of documentation as to why REM is important, I'd like to point you to Jonathan Snook's outstanding Font sizing with rem post, where he explains sizing with PX, EM, and how REM comes into the picture.  Here's how I implemented REM sizing within Stylus with a PX fallback!

The Stylus CSS

My method uses two mixins to accomplish the feat: one to set the base font-size and another to rem-ify the pixel unit:

set-font-size(value) {
    font-size: value; /* add PX (or original value) as backup */

    if (value is inherit) {
        /* do nothing, "inherit" has no unit */
    } else {
        font-size: remify(value);
    }
}

remify(value) { /* separate mixin, so it can be used elsewhere */
    u = unit(value);

    if (u is 'px') {
        return unit(value/16, 'rem');
    } else {
        return unit(value, u);
    }
}

The 16 within the remify unit represents the base font size, in pixels, that rems should be calculated by. The usage and output looks as follows:

.smaller {
	set-font-size(13px);
}

/*
	yields:

	.smaller {
		font-size: 13px;
		font-size: .8125rem;
	}

*/

Don't forget to set the base font size on the html element, usually 100%.  Also remember this mixin assumes a PX font is passed in, so if you aren't looking to use PX as backup, this isn't the solution for you.  If you do, however, there's no hurt in using these Stylus mixins!

Recent Features

  • By
    Creating Scrolling Parallax Effects with CSS

    Introduction For quite a long time now websites with the so called "parallax" effect have been really popular. In case you have not heard of this effect, it basically includes different layers of images that are moving in different directions or with different speed. This leads to a...

  • By
    Animated 3D Flipping Menu with CSS

    CSS animations aren't just for basic fades or sliding elements anymore -- CSS animations are capable of much more.  I've showed you how you can create an exploding logo (applied with JavaScript, but all animation is CSS), an animated Photo Stack, a sweet...

Incredible Demos

  • By
    Create Your Own Dijit CSS Theme with LESS CSS

    The Dojo Toolkit seems to just get better and better.  One of the new additions in Dojo 1.6 was the use of LESS CSS to create Dijit themes.  The move to using LESS is a brilliant one because it makes creating your own Dijit theme...

  • By
    Create a Clearable TextBox with the Dojo Toolkit

    Usability is a key feature when creating user interfaces;  it's all in the details.  I was recently using my iPhone and it dawned on my how awesome the "x" icon is in its input elements.  No holding the delete key down.  No pressing it a...

Discussion

  1. You can also use this REM converter, which is really nice! https://offroadcode.com/prototypes/rem-calculator/

  2. I’ve been doing it px-ify style instead of remify!

    $default-font-size = 14px
    
    font-size(_size)
      if unit(_size) == 'rem'
        font-size: (_size * $default-font-size)px
      font-size: _size
    
    .bigger
      font-size(1.2rem)
    
  3. The first sentence in this post cracks me up every time. Oh and if anyone wants to remify multiple values you can just:

    remify() {
        remified = ();
    
        for arg in arguments {
            push(remified, unit(arg/16, 'rem'));
        }
        
        return remified;
    }
    

    so

    .foo {
        padding: remify(16px 32px 8px);
    }
    

    yields:

    .foo {
        padding: 1rem 2rem 0.5rem;
    }
    
  4. Mohamed Elkebir

    It’s best to let this code work with multi/mixed-values:

    pixify(property, sizes, base = 16)
      pixels = ()
      rems = ()
    
      for j, i in sizes
        if typeof(j) is 'unit'
          push(pixels, unit(j * base, 'px'))
          push(rems, unit(j, 'rem'))
        else
          push(pixels, j)
          push(rems, j)
    
      {property}: pixels
      {property}: rems
    

    Usage:

    pixify(border, 0.3 solid red)
    

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!