This is a second post exploring applications for Syntactically Awesome Stylesheets (Sass), the CSS preprocessor that can really turbocharge how you create and modify CSS.

Here we’ll be looking at a very simple Sass functions I’ve written called rUp, which I think is a generally-better alternative to CSS’s default em specification.

The code

@function rUp($multiple: 1, $font-size: $base-font-size) {
  @return ceil($font-size * $multiple);
}

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:

$base-font-size: 16px; // Defining base font size across the site
body {
  font-size: $base-font-size;
}

How to use it

padding: rUp(1/2) // Padding is next pixel above 1/2 times base font size
width: rUp(5) // Padding is next pixel above 5 times base font size

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!