Stylus: A simple function to convert px to %

The designer I work with knows his font-sizes in px. I want to render them as % so that I can adjust the font-size on the body element if needed to scale the entire page's font-size.

Here's how to do it using my favorite CSS preprocessor, Stylus.

Create a basefont that's used on the body, then use the simple font-size-scaled function wherever you want to specify a font-size in px that will be rendered as a %.

basefont = 14px

font-size-scaled(size)
  font-size round((size/basefont)% * 100, 3);

body
  font-size basefont

h1
  font-size-scaled 28px // 200%