Create Simple Vertical Rhythm with Sass

_function.scss

@use "sass:math";

@function calculateFontSize($step:0, $fontSize: 1rem) {
	$ratio: 1.333;

	$newFontSize: $fontSize * math.pow($ratio, $step);

  @return $newFontSize;
}

@function calculateLineHeight($fontSize) {
	$lineHeight: 1.5;
	$maxRatio: 1.9;
	$minRatio: 1.3;
	$ratio: math.div($lineHeight, $fontSize);
	$increment: math.div($lineHeight, 4);
	$newLineHeight: $lineHeight;

	@while $ratio < $minRatio {
		$newLineHeight: $newLineHeight + $increment;
		$ratio: math.div($newLineHeight, $fontSize);
	}

	@while $ratio > $maxRatio {
		$newLineHeight: $newLineHeight - $increment;
		$ratio: math.div($newLineHeight, $fontSize);
	}

	@return $newLineHeight+rem;
}

_mixins.scss

@import "_function.scss";
	
@mixin verticalRhythm($step: 0, $fontSize: 1rem) {
	$_fontSize: calculateFontSize($step, $fontSize);

	font-size: $_fontSize;
	line-height: calculateLineHeight($_fontSize);
}

_verticalRhythm.scss

@import "_mixins.scss";

body {
	font-size: 1rem;
	line-height: 1.5;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.t1 {
	@include verticalRhythm(5);
}
.t2 {
	@include verticalRhythm(4);
}
.t3 {
	@include verticalRhythm(3);
}
.t4 {
	@include verticalRhythm(2);
}
.t5 {
	@include verticalRhythm(1);
}
.t6 {
	@include verticalRhythm();
}
.s1 {
	@include verticalRhythm(-1);
}