rem(value)

[dbox]

Okay, here's the last of my mixins folder, and then basically everything will have been completely ported to axis :)

I didn't write this initially, just inherited from a project, so, this will need a bit of cleanup to work properly with axis..

Basically, for many scenarios it is still much easier to think pixels, so this mixin calculates and returns a rem value based on px input.

Here's a demo:

http://codepen.io/dbox/pen/YXQYzR

Currently it requires a $base-font-size variable, but I assume there is a cleaner way to hook into that.

Lemme know @Jenius.

[zspecza]

base-font-size ?= 16px

The above syntax will reference an existing base-font-size, otherwise it will default to 16px.

I think the base-font-size variable that was used in the vertical rhythm module of old versions of Axis might still exist, otherwise it does exist in Rupture and few other Stylus plugins.

[jescalan]

I can get down with this. PR it in!

[dbox]

Codepen updated with @declandewet 's suggestion. I'll get this in. Thanks.

[dbox]

So, I've come to sort of regret having a dash in front of this function.

Doing something like:

margin-top: rem(50px)

now looks like :

margin-top: -rem(50px)

which makes it look like a negative number and makes it even weirder looking when there ARE negative numbers:

margin-bottom: -rem(-50px)

I do like the practice of separating functions from mixins with the dash, but maybe we can do it only when those functions are completely inside of the mixin.
When calling the function directly in the css it looks so much cleaner to have it be dashless. Especially in this case.

I wish there was a way to have an alias, but there isn't to my knowledge. Thoughts @Jenius @declandewet ?

[dbox]

reopening. pinging @declandewet @Jenius

[jescalan]

My only question here is whether this will mess things up when using the string rem directly in your stylus code

[dbox]

AFAIK if its defined with the dash it has to be used with the dash. I'm happy to leave with the dash, but I'll just end up having a 2nd version in all my projects without it. Kinda funny how one character can bug so much, but it can.

[zspecza]

That would definitely conflict with the rem keyword. Stylus doesn't handle conflicts well - if you use the rem keyword, and the undashed version of that function, you'll find that Stylus will throw an error at you because the stringified function is not a valid unit

[dbox]

it actually works great without the dash, been using it without since last november..

but i'm fine to leave it. just wanted to hear your thoughts.. Does my initial quandary make sense?

[zspecza]

I feel like the fact that it's working might be a bug in Stylus... I've had many problems with the kind of conflict situation I described in my prior comment... I wouldn't trust that, if it were me.

Interestingly, what happens when you do this?

font-size: rem(14px)
padding: 1rem

[dbox]

works as expected:

https://www.dropbox.com/s/2hrx0scjzcvcnmp/Screenshot%202015-09-18%2014.06.53.png?dl=0