Transitioning a codebase away from html { font-size: 62.5%; }

input.scss

// 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 */
}   

output.css

html {
  font-size: 62.5%;
}

/* Before removal of font-size: 62.5%; */
h1 {
  font-size: 4rem;
  font-size: 4rem;
  /* This will compute to ~40px with root font size set to 62.5% */
}

/* After removal of font-size: 62.5%; */
h1 {
  font-size: 2.5rem;
  /* This will compute to ~40px with a default 16px root font size */
}

settings.json

{
  "sass": {
    "compiler": "dart-sass/1.32.12",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}