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!

Leave a Reply

Your email address will not be published. Required fields are marked *

Rate post *

What others are saying