LESS Repsonsive Typography

_typography.less

@min_width: 400;
@max_width: 800;
@min_font: 12;
@max_font: 24; 
@min_width-px: unit(@min_width, px);
@max_width-px: unit(@max_width,px);
@min_font-px: @min_font * 1px;
@max_font-px: @max_font * 1px;

:root { 
    font-size: @min_font * 1px; 
}

@media (min-width: @min_width-px) and (max-width: @max_width-px){
  :root { 
    font-size: ~"calc( @{min_font-px} + (@{max_font} - @{min_font}) * ( (100vw - @{min_width-px}) / ( @{max_width} - @{min_width}) ))";
  }
}
@media (min-width: @max_width-px){
   :root { 
     font-size: @max_font-px;
   }
}