Saving Stuart's Expressive Text work for future reference.

expressive-text.scss

// components/expressive-text.scss
@import '../variables.scss';
@import '../mixins.scss';

// Local Variables
$colors-default: $colors-datarange-bad-to-good;
$precision-default: 24;
$steps-default: gradient;

// Helpers
@mixin expressive-text(
$colors: $colors,
$precision: $precision,
$steps: $steps) {
  &[data-value-ratio] {
    background: -webkit-linear-gradient($colors);
    background-clip: text;
    -webkit-background-clip: text;
    text-fill-color: transparent;
    -webkit-text-fill-color: transparent;
    background-size: 200em; // Any large-enough multiple of text size to appear solid
  }

  @if $steps == gradient {
    @for $i from 0 through $precision {
      &[data-value-ratio="#{$i}"] {
        background-position-y: $i + %;
      }
    }
  } @else {
    @for $i from 0 through $precision {
      $norm: floor($precision/$steps);
      $frac: floor($i/$norm) * $norm;

      &[data-value-ratio="#{$i}"] {
        background-position-y: $frac * 1%;
      }
    }
  }
}

// Styles
.exp-text {
  @include expressive-text($colors: $colors-default, $precision: $precision-default, $steps: $steps-default);
}