Poly Fluid Sizing for Stylus

Stylus mixin for linear interpolation between multiple values across multiple breakpoints using CSS calc() and viewport units. Adaption of the SASS mixin by Jakobud/poly-fluid-sizing.

Usage

Poly Fluid Sizing is a stylus mixin that gives you precise control over CSS measurements, like the font-size across multiple breakpoints. It allows you to set the desired scale for every breakpoint and applies linear interpolation between them using calc(). It uses some basic dark math behind the scenes. You don't need to know the math or understand it to use this mixin.

Demo

// Import mixin
@require 'poly-fluid-sizing-stylus'
// Depending on your setup, this might also be something like: `@import '~poly-fluid-sizing-stylus'`

h1
  poly-fluid-sizing('font-size', {'30rem': 2rem, '50rem': 3rem, '60rem': 4rem})

This will yield the following CSS code (without the comments):

h1 {
  /* The minimum font-size */
  font-size: 2rem;
}
@media (min-width: 30rem) {
  h1 {
    /* Interpolating the font-size between 2rem @ 30rem and 3rem @ 50rem viewport width */
    font-size: calc(5vw + 0.5rem);
  }
}
@media (min-width: 50rem) {
  h1 {
    /* Interpolating the font-size between 3rem @ 50rem and 4rem @ 60rem viewport width */
    font-size: calc(10vw - 2rem);
  }
}
@media (min-width: 60rem) {
  /* The maximum font-size */
  h1 {
    font-size: 4rem;
  }
}

It can do more then font-size

Using Poly Fluid Sizing on the font-size property is an obvious use case. It can however be used for any other numeric CSS property:

main
  poly-fluid-sizing('padding', {'30rem': 1rem, '50rem': 3rem})

Why not CSS min/max/clamp?

The vanilla CSS functions min(), max() and clamp() can be used to achieve a very similar effect to that of this mixin. If you want to know how, I recommend this article by CSS-Tricks.com.

Advantages over vanilla CSS

• Browser Support: IE/Edge currently (Edge v18) still doesn`t support min/max/clamp. Firefox > v74, Chrome > v78. See here: https://caniuse.com/#feat=mdn-css_types_min
• Multiple breakpoints: This mixin is able to support multiple breakpoints. Although, in most cases, you could probably do without that.
• Easy to configure: The vanilla CSS solution using clamp() is not to hard to use, but the syntax of this mixin is a little easier to parse for our brains.

Disadvantages compared to vanilla CSS and limitations

• Verbosity: This mixin generates more code compared to vanilla CSS.
• You can't mix units: Because the interpolation is calculated at build time, you can use various units like px or rem, but you can't mix them. For example, you can't set a 2em font-size for 1000px viewport width. This is a logical and mathematical limitation.
• One property at a time: You can choose any numeric CSS property that you like, but you can only ever use one at a time. That means, you can use padding, but if you only want the sizing to be applied to padding-left and padding-right, you have to call the mixin twice.

Credits

This mixin is a stylus adaption of the original, wonderful SASS mixin by https://github.com/Jakobud. You can learn more about this technique from the author himself on Smashing Magazine.