The code

What it does

rUp lets you set sizes with respect to the main font size on your site, which, in this case, has been defined separately in the variable $base-font-size. That definition would need to happen before you defined rUp itself, and would look as follows:

How to use it

You can change the value of $base-font-size across your site, and anything defined in rUp units will respond accordingly.

Why it’s cool

rUp has a number of advantages over just using em values directly:

By default, rUp is defined relative to the main font size on your site. em values slip all around depending on the font size of the current element being styled; rUp is a lot more stable. (It’s like rems, if you’ve heard of those, but without rems’ obscurity or browser support worries.)

rUp rounds all values up to the nearest integer, so you don’t have to worry about browsers handling pixel rounding differently.

You can always override the font size you’d like to talk to, using something like rUp(5, $another-font-size).

One caveat, however: Because rUp is done in preprocessing, browsers don’t know about it; it just looks like a flat pixel value. As a result, it won’t respond to user font-size changes within the browser, as ems would. So if you’d like, for example, to always preserve a ratio between two font sizes—even for users who set their own default font sizes directly in their browsers—then ems really are the way to go.

Enjoy!

I’ve really gotten a lot of mileage out of rUp in a complex client project that needs a lot of interlocking size values. Once you start to play with it, I’m sure you’ll love using it too. We’d love to hear your thoughts!

1 thought on “rUp: A Sass Function That Offers a Powerful Alternative to Ems”

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

Comment

Name *

Email *

Sign me up for the newsletter!

Learn the Right Way to Get a Site Built.

Before you spend a dime on a new website, you should understand how the web works. Join Press Up's mailing list to get our six-part e-mail course, The Six Things You Absolutely Must Know Before Starting a Web Project, for free!

Email address:

First Name:

Leave this field empty if you're human:

We Also Publish

WPShout — Great tutorials and more for WordPress developers and enthusiasts