Generated by SassMeister.com.

input.scss

/// Vertical rhythm grid unit
/// @param {Number} $multiplier [1] - vertical rhythm multiplier
/// @return {Rem} - vertical rhythm unit
@function grid-unit($multiplier: 1) {
  @return #{strip-unit($base-font-size) * $multiplier * $base-line-height * 0.0625}rem;
}

/// Remove the unit of a length
/// @param {Number} $number - Number to remove unit from
/// @return {Number} - Unitless number
@function strip-unit($number) {
  @if type-of($number) == "number" and not unitless($number) {
    @return $number / ($number * 0 + 1);
  }

  @return $number;
}

/// Correct font baseline on "real" baseline of vertical rhythm unit
// $size and $lineheight might be in pixels
@mixin baseline($size, $lineheight) {
  $size-rems: strip-unit($size / $rootsize);
  $capheight-rems: $size-rems * map-get($font, cap-height);
  $lh-rems: strip-unit($lineheight / $rootsize);
  $shift: ($lh-rems - $capheight-rems) / 2;
  
  font-family: #{map-get($font, font-family)};
  font-size: #{$size-rems}rem;
  padding-top: #{$shift}rem;
  margin-bottom: #{$shift * -1}rem;
  line-height: #{$lh-rems}rem;
}

/// Base font and line height reset
$base-font-size: 16px; /* ~1rem */
$base-line-height: 1.4;

/// Apply base font size and line height to root element for create vertical
/// rhythm grid
html {
  font-size: $base-font-size;
  line-height: grid-unit();
}

/// Apply to headings
h1 {
  margin-bottom: grid-unit(2);
  /* reaplce with one mixin (baseline) which add right padding-top,
  margin-bottom and line-height according to only font size 
  (might be in px or rem) */
}

/// Apply to paragraph
p {
  line-height: grid-unit();
  /* reaplce with one mixin (baseline) which add right padding-top,
  margin-bottom and line-height according to only font size 
  (might be in px or rem) */
}

output.css

/* ~1rem */
html {
  font-size: 16px;
  line-height: 1.4rem;
}

h1 {
  margin-bottom: 2.8rem;
  /* reaplce with one mixin (baseline) which add right padding-top,
  margin-bottom and line-height according to only font size 
  (might be in px or rem) */
}

p {
  line-height: 1.4rem;
  /* reaplce with one mixin (baseline) which add right padding-top,
  margin-bottom and line-height according to only font size 
  (might be in px or rem) */
}

settings.json

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