Re-create a Stylus px-2-rem function in SCSS

[rowild]

Hi, my first post here!

I was wondering, if you could give me a hint on how to re-build a Stylus-function in SCSS.

Stylus enables one to recalculate px-values to rem by defining a variable like this:

$px = (1/$base-font-size) rem

which allows the coder to still think in px, just adapting the way of writing a bit, which is like this:

body { font-size: 24*$px;}

I find this incredibly useful, especially when it comes to migrating a px-based layout to a rem-based one, and would therefore like to have a similar workflow in SCSS (and because I do not want to change my grunt setup to Stylus, not yet at least…)

It seems to be very easy to achieve rem values by providing a SCSS function:

@function px2rem($value) {
   @return #{$value/$base-font-size}rem;
}

// Usage:
body { font-size: px2rem(24); }

That results in more writing, so I tried to put the calculation in a variable:

$px: (1/$base-font-size);

// Usage:
body { font-size: 24*$px ??? }

But my variable-based solution does not allow to add the “sizing type” (the “rem” ending), neither in the variable nor in the usage scenario.

This is the point, where I am stuck. Does anybody of you have a hint for me how to solve that problem? Or is it just not possible in scss?

Thank you!
Robert

[Alen]

Welcome @rowild (Robert)

Try this

@mixin px2rem($size: 16) {
  font-size: $size * 1px; // fallback
  font-size: ($size / 10) * 1rem;
}

html { font-size: 62.5%; }
body { @include px2rem(); } // 16px
h1{ @include px2rem(42); } // 42px

/* You'll get following output */

html {
  font-size: 62.5%;
}

body {
  font-size: 16px;
  font-size: 1.6rem;
}

h1 {
  font-size: 42px;
  font-size: 4.2rem;
}

You can also do a post-processing step with a tool called px_to_rem. It takes a whole stylesheet and converts PX units to rem.

[rowild]

Thank you, Alen, for your quick and detailed answer! Very kind of you!

I do know solutions like yours already (lots of them can be found here on this site, actually), though, but I have not seen anything like the Stylus solution and am wondering if that approach is actually possible with SCSS.

Thinking in px all the time, the way of writing sizes of any kind by just adding a “$” in between of the number and its unit (24px as opposed to 24$px) is so much more natural and also shorter (nor include, no parenthesis).

Do you maybe know of any way how to include a unit in the variable based approach? Either via the variable itself or at the place of implementation?

I appreciate you input really very much and hope not to have offended you, which I would like to apologize for right away!!!

Thanks again!
Best regards,
Robert

[Alen]

Hey @rowild the function code you provided in 1st example doesn’t work. Here’s a working example:

$base-font-size: 16;
@function px2rem($value: 16) {
   @return ( $value / $base-font-size) * 1rem;
}
body { font-size: px2rem(); }

In your second example, you’re doing multiplications in two places. IMO not a good way to approach this. In addition you need to multiply your result by 1 unit. So to get a rem value you would do: 10 * 1rem = 10rem.

So code would look like this:

$base-font-size: 16;
$px: ( 1 / $base-font-size ) * 1rem;
body { font-size: 24 * $px; }

Hope that helps.

[rowild]

Alen – you are my hero! The trick with “*1rem” did it! Awesome! Thanks a lot!

I am confused, though, about the not-working version of my px2rem function:

@function px2rem($value) {
   @return #{$value/$base-font-size}rem;
}

which you propose to write like so:

@function px2rem($value) {
   @return ($value/$base-font-size) * 1rem;
}

The latter version is not doubt nicer, but, still, my version works and delivers correct output. What would be the problem in your opinion?

Thanks a lot again! You provided me with a great start into this day!
Best regards, Robert

[JustinF]

Read this comprehensive article on Sass units.
Understanding Sass Units

The problem is your function returns a string, and Alen’s function returns a number. Yours may still deliver the correct output, but it’s not the proper way to do it.

What you’re doing is simply appending the ‘rem’ and therefore casting the value as a string.

Look at the compiled CSS and see the different return types.
http://codepen.io/jmaker/pen/GJKLQv?editors=110

[rowild]

This makes a whole lot sense and is an eye opener for me! Thanks for clarifying that!

Best regards,
Robert

[Author]

Posts