LESS Mixin to easily create fluid typography based on viewport information

viewport-fluid.less

// see https://css-tricks.com/snippets/css/fluid-typography/ for 🤯
.viewport-fluid(@property, @from, @to, @screen-min: @screen-sm, @screen-max: @screen-lg, @viewport-unit: vw) {
  @{property}: @from;

  @media (min-width: @screen-min) {
    @{property}: calc(
      @from + unit(@to - @from) * ((~"100@{viewport-unit}" - @screen-min) / unit(@screen-max - @screen-min))
    );
  }

  @media (min-width: @screen-max) {
    @{property}: @to;
  }
}