LESS: fluid text mixin

The difference between responsiveness and fluidity is that changes in size do not happen suddenly but gradually. In the previous blog post, for example, elements with the class .display-1 would suddenly increase from 64px in size to 70px as soon as the viewport width changes from 789px to 790px. A fluid font size would instead gradually change from 64px to 70px at every increment of viewport width from 590px all the way up to 790px. Achieving this behavior is relatively simple:

First I declare the break points

/*
 * Breakpoints to match Butter Cake
 */
@bp-sm: 590px;
@bp-md: 790px;
@bp-lg: 1160px;
@bp-xl: 1260px;
@screen-sm: ~"(min-width: @{bp-sm})";
@screen-md: ~"(min-width: @{bp-md})";
@screen-lg: ~"(min-width: @{bp-lg})";
@screen-xl: ~"(min-width: @{bp-xl})";

Then I prepare the mixin. Just like in my responsive text LESS mixin, I want to pass sizes in pixels without specifying the px unit in the parameters every time I call the mixin.

/*
 * Mixin for fluid scaling of fonts
 */
.fluid-font (@min-size, @max-size) {

    // Remove units from breakpoint
    @screen-sm-pxless: unit(@bp-sm);
    @screen-xl-pxless: unit(@bp-xl);

    // Add units to parameters
    @min-size-px: unit(@min-size, px);
    @max-size-px: unit(@max-size, px);

    // Set font size for screens smaller than 590px
    font-size: @min-size-px;

    // Set font size to scale from 590px to 1260px
    @media (min-width: @bp-sm) {
        font-size: calc(@min-size-px + (((100vw - @bp-sm) / (@screen-xl-pxless - @screen-sm-pxless)) * (@max-size - @min-size)));
    }

    // Set dont size for screens larger than 1260px
    @media (min-width: @bp-xl) {
        font-size: @max-size-px;
    }
}

And now I use the mixin

.display-1 {
    .fluid-font (58, 82);
}

Which compiles to

.display-1 {
    font-size: 58px;
}

@media (min-width: 590px) {
    .display-1 {
        font-size: calc(58px + (((100vw - 590px) / (1260 - 590)) * (82 - 58)));
    }
}

@media (min-width: 1260px) {
    .display-1 {
        font-size: 82px;
    }
}