I recently was working on a project for a client and realized that I wanted a mixin, but they changed their minds frequently. So I was tasked with creating a mixin that could easily handle the nesting (read rems instead of percentages or ems) and would degrade gracefully to the pixel measurements that the client provides (and changes on a dime)
Hope you enjoy and this helps at least one designer/developer to shave a few minutes off a build. Who am I kidding this can save hours off a build
@mixin body-font($sizeValue: 16, $line-height: 16, $weight: 400, $style: normal){
font-weight: $weight;
font-style: $style;
font-size: $sizeValue + px;
font-size: ($sizeValue / 10) + rem;
line-height: ($line-height / $sizeValue);
}
So this compiles to this:
.your-new-class{
font-weight: 400;
font-style: normal;
font-size: 16px
font-size: 1.6rem;
line-height: 1;
}
This assumes also that you reset your html font size. (eg. html {font-size: 62.5%;}
) This is what really makes the font-size: sizeValue/10 magic happen!
What others are saying
A really good answer, full of ratnliaoity!