Add unit selection to between mixin

[grind-t]

Summary

between mixin returns a CSS calc formula for linear interpolation of a property between two values. The value of the calc formula will change when any relative value changes. Therefore, is it possible to add a choice of other relative units besides vw?

Basic Example

A simple solution would be to add an optional parameter with a relative unit to be used in the formula.

width: ${between('30px', '70px', '18px', '36px', 'em')};

Reasoning

Let's say that the header icon width should be 30px at a font size of 18px and 70px at 36px. Then, instead of changing both properties in media queries, you can simply use interpolation:

const Icon = styled.img`
  /* width: calc(-10px + 2.22em) */
  width: ${between('30px', '70px', '18px', '36px', 'em')};
`

const Header = styled.header`
  @media screen and (min-width: 768px) {
    /* width: calc(-10px + 2.22 * 18px) ≈ 30px */
    font-size: 18px;
  }

  @media screen and (min-width: 2560px) {
    /* width: calc(-10px + 2.22 * 36px) ≈ 70px */
    font-size: 36px;
  }
`

[developerits]

The solution was found, It was written by author.