// This is bad and we don't want it:
html {
font-size: 62.5%;
}
// So we create this variable...
$root-font-size-hack-active: true;
// ...and this Sass function:
@function rem($size) {
@if ($root-font-size-hack-active == false) {
$size: $size * 0.625;
}
@return $size;
}
/* Before removal of font-size: 62.5%; */
h1 {
// Then search/replace all existing uses of rem with that function:
// Before:
font-size: 4.0rem;
// After:
font-size: rem(4.0rem);
/* This will compute to ~40px with root font size set to 62.5% */
}
/* After removal of font-size: 62.5%; */
$root-font-size-hack-active: false;
h1 {
font-size: rem(4.0rem);
/* This will compute to ~40px with a default 16px root font size */
}