Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Sass to convert px to rem
* Convert font-size from px to rem with px fallback
* @param $size - the value in pixel you want to convert
* e.g. p {@include fontSize(12px);}
// Function for converting a px based font-size to rem.
@function calculateRem($size) {
$remSize: $size / 16px;
//Default font size on html element is 100%, equivalent to 16px;
@return #{$remSize}rem;
// Mixin that will include the fall back px declaration as well as the calculated rem value.
@mixin fontSize($size) {
font-size: $size;
font-size: calculateRem($size);

This comment has been minimized.

Copy link

sarutole commented Mar 6, 2020

The problem with the above function is that it returns a string which can not be used in further numerical calculations.

This works better:

@function rem($size) {
  @return $size / 16px * 1rem;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.