I've been making excuses for years to use px on my font-size
s. Deep inside i know it's wrong. And in this post i will show how i made the move and how i made it so simple i feel lazy everytime i use it. I'm using SASS, i'm sure it's easy to do a similar system in LESS.
Ires method
It all started with this article. If you, like me, suppress the proper way to use font-size
and need a little brushing up on that front. I recommend reading the whole thing. Otherwise, scroll to the "My Method" part.
Basically she sets the base font (the html element) to 62.5% which is 10px in most cases. This makes it easier to calculate the pixel. Look at the below stolen snippet:
html {
font-size: 62.5%; /* sets the base font to 10px for easier math */
}
body {
font-size: 16px;
font-size: 1.6rem;
/* sets the default sizing to make sure nothing is actually 10px */
}
h1 {
font-size: 32px;
font-size: 3.2rem;
}
Easy! Readable! This is awesome.
Wills method
In a comment by Will Russel he shows the following SASS function:
@function rem($size) {
$remSize: $size / 16;
@return $remSize * 1rem;
}
Now you can write it like:
.link {
font-size: 20px;
font-size: rem(20);
}
Very cool! Now you don't need to set a base size. But i dumbed it down even more so that even i can't make up excuses not to use this technique.
My method
I added this mixin:
@mixin remify($property, $sizes) {
$pixelSizes: ();
$remSizes: ();
@each $s in $sizes {
$pixelSizes: append($pixelSizes, $s * 1px);
$remSizes: append($remSizes, rem($s));
}
#{$property}: $pixelSizes;
#{$property}: $remSizes;
}
This way you can do both:
@include remify(font-size, 25);
// Outputs
// font-size: 25px;
// font-size: 1.5625rem;
And:
@include remify(margin, 15 0);
// Outputs
// margin: 15px 0px;
// margin: 0.9375rem 0rem;
I didn't bake in the rem()
function because in some cases it's nice to have that one to. For example, there is no support for auto
so sometimes i declare some semi manual rules.
margin: 10px auto;
margin: rem(10) auto;
See the Gist.