Generated by SassMeister.com.

SassMeister-input-HTML.html

<p class="small">lorem ipsum dolor sit amet</p>
<p>lorem ipsum dolor sit amet</p>
<p class="h6">lorem ipsum dolor sit amet</p>
<p class="h5">lorem ipsum dolor sit amet</p>
<p class="h4">lorem ipsum dolor sit amet</p>
<p class="h3">lorem ipsum dolor sit amet</p>
<p class="h2">lorem ipsum dolor sit amet</p>
<p class="h1">lorem ipsum dolor sit amet</p>

SassMeister-input.scss

// ----
// Sass (v3.4.4)
// Compass (v1.0.1)
// SassyLists (v2.2.1)
// ----

@import 'SassyLists';

// ratios pré-définis

$phi: 	               1/1.618!default;
$golden: 	             1/1.618!default;
$double-octave: 	         1/4!default;
$major-twelfth: 	         1/3!default;
$major-eleventh: 	         3/8!default;
$major-tenth: 	           2/5!default;
$octave: 	                 1/2!default;
$major-seventh: 	        8/15!default;
$minor-seventh: 	        9/16!default;
$major-sixth: 	           3/5!default;
$minor-sixth: 	           5/8!default;
$fifth: 	                 2/3!default;
$augmented-fourth: 1/1.4142135!default; // 1/√2
$fourth: 	                 3/4!default;
$major-third: 	           4/5!default;
$minor-third: 	           5/6!default;
$major-second: 	           8/9!default;
$minor-second: 	         15/16!default;

// paramètres d’entrée
// @param $base-font-size taille de texte du navigateur par défaut
// @param $ratio          ratio appliqué pour le calcul des échelles typographiques
// @param $scale1         taille de texte importante de l’échelle 1 (utilisé comme niveau 0)
// @param $scale2         taille de texte importante de l’échelle 2

$base-font-size: 16px!default;
$ratio:       $golden!default;
$scale1:         20px!default;
$scale2:         25px!default;
$amplitude:        10!default;

// variables internes

$i: 0;

// on calcule les deux échelles

@while $i < $amplitude
{
  $next1: nth($scale1, length($scale1)) / $ratio;
  $next2: nth($scale2, length($scale2)) / $ratio;
  
  $prev1: nth($scale1, 1) * $ratio;
  $prev2: nth($scale2, 1) * $ratio;
    
  $scale1: join($scale1, $next1);
  $scale2: join($scale2, $next2);
  
  $scale1: join($prev1, $scale1);
  $scale2: join($prev2, $scale2);
  
  $i: $i + 1;
}

// fusion + tri + arrondis sur les échelles

$scale: sl-sort(join($scale1, $scale2));

$roundscale: ();

@each $step in $scale
{
  $roundscale: join($roundscale, round($step));
}

$scale: sl-remove-duplicates($roundscale);

// fonctions publiques

@function scale($level: 0)
{
  $start: nth($scale1, $amplitude + 1);
  
  @return nth($scale, index($scale, $start) + $level);
}

@function em($px, $contexte: $base-font-size)
{
    @return($px / $contexte * 1em);
}

// exemple d’utilisation

$fs: scale();

body
{
  font-size: em($fs);
}

.small
{
  font-size: em(scale(-1), $fs);
}
.h1
{
  font-size: em(scale(6), $fs);
}
.h2
{
  font-size: em(scale(5), $fs);
}
.h3
{
  font-size: em(scale(4), $fs);
}
.h4
{
  font-size: em(scale(3), $fs);
}
.h5
{
  font-size: em(scale(2), $fs);
}
.h6
{
  font-size: em(scale(1), $fs);
}

// EOF

SassMeister-output.css

body {
  font-size: 1.25em;
}

.small {
  font-size: 0.75em;
}

.h1 {
  font-size: 4.25em;
}

.h2 {
  font-size: 3.25em;
}

.h3 {
  font-size: 2.6em;
}

.h4 {
  font-size: 2em;
}

.h5 {
  font-size: 1.6em;
}

.h6 {
  font-size: 1.25em;
}

SassMeister-rendered.html

<p class="small">lorem ipsum dolor sit amet</p>
<p>lorem ipsum dolor sit amet</p>
<p class="h6">lorem ipsum dolor sit amet</p>
<p class="h5">lorem ipsum dolor sit amet</p>
<p class="h4">lorem ipsum dolor sit amet</p>
<p class="h3">lorem ipsum dolor sit amet</p>
<p class="h2">lorem ipsum dolor sit amet</p>
<p class="h1">lorem ipsum dolor sit amet</p>