# poly-fluid-sizing

> SASS mixin for linear interpolation between multiple values across multiple breakpoints using CSS calc() and viewport units

Latest version **2.0.0** (published 2025-12-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install poly-fluid-sizing
pnpm add poly-fluid-sizing
yarn add poly-fluid-sizing
bun add poly-fluid-sizing
```

## Health

**Score 50/100 (C)** — status: stable.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2025-12-07 |
| First published | 2017-05-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 23.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 89 |
| Author | Jake Wilson |
| Maintainers | jakobud |
| Keywords | sass, css, scss, typography |

## Links

- npm: https://www.npmjs.com/package/poly-fluid-sizing
- Repository: https://github.com/Jakobud/poly-fluid-sizing
- Issues: https://github.com/Jakobud/poly-fluid-sizing/issues
- npm.io page: https://npm.io/package/poly-fluid-sizing

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 2.0.0 (latest) — 2025-12-07
- 1.2.1 — 2021-11-11
- 1.1.0 — 2017-05-24

## README

# 📐 Poly Fluid Sizing

Poly Fluid Sizing is a SASS mixin to linear interpolation size values using calc() across multiple breakpoints. It uses some basic math behind the scenes. You don't need to know the math or understand it to use this mixin.

## 📦 Install via npm as a `devDependency`

`npm install poly-fluid-sizing --save-dev`

## 🚀 Usage

```scss
// Load via SASS Node Package Importer
@use 'pkg:poly-fluid-sizing' as *;

h1 {
  @include poly-fluid-sizing('font-size', (320px: 18px, 768px: 26px, 1024px: 38px, 1440px: 46px) );
}
```

This outputs the following CSS:

```css
/* The comments are not generated and are only here for clarity */

h1 {
  /* The minimum font-size */
  font-size: 18px;
}
@media (width >= 320px) {
  h1 {
    /* Interpolate the font-size between 18px @ 320px and 26px @ 768px viewport */
    font-size: calc(1.786vw + 12.286px);
  }
}
@media (width >= 768px) {
  h1 {
    /* Interpolate the font-size between 26px @ 768px and 38px @ 1024px viewport */
    font-size: calc(4.6875vw - 10px);
  }
}
@media (width >= 1024px) {
  h1 {
    /* Interpolate the font-size between 38px @ 1024px and 46px @ 1440px viewport */
    font-size: calc(1.923vw + 18.308px);
  }
}
@media (width >= 1440px) {
  h1 {
    /* The maximum font-size */
    font-size: 46px;
  }
}
```

## ⚙️ Options and Syntax

```scss
@include poly-fluid-sizing(property, map, options: (round: true, precision: 3, rangeContext: true));
```

### 🔧 Parameters

- **property** (string): The CSS property to apply fluid sizing to (e.g., `'font-size'`, `'padding'`, `'margin'`)
- **map** (map): A SASS map of breakpoint-value pairs defining the fluid sizing ranges (e.g., `(320px: 18px, 768px: 26px)`)
- **options** (map, optional): A SASS map of configuration options:
  - **round** (boolean, default: `true`): Enable or disable rounding of calculated values
  - **precision** (number, default: `3`): Number of decimal places to round to (when rounding is enabled)
  - **rangeContext** (boolean, default: `true`): Whether to use Media Query Level 4 Range Context syntax (`width >=` vs. `min-width:`) See: https://www.w3.org/TR/mediaqueries-4/#mq-range-context

### 💡 Examples

```scss
// Using default options
@include poly-fluid-sizing('font-size', (320px: 18px, 768px: 26px) );

// Disabling rounding
@include poly-fluid-sizing('font-size', (320px: 18px, 768px: 26px), (round: false) );

// Custom precision
// Note: SASS outputs mathematical calculations to a maximum of 10 decimal places
@include poly-fluid-sizing('font-size', (320px: 18px, 768px: 26px), (precision: 6) );

// Use min-width syntax
@include poly-fluid-sizing('font-size', (320px: 18px, 768px: 26px), (rangeContext: false) );

// Multiple options
@include poly-fluid-sizing('font-size', (320px: 18px, 768px: 26px), (round: true, precision: 5, rangeContext: false) );
```

## ✨ It can do more than `font-size`

Using Poly Fluid Sizing on `font-size` is an obvious use case. But it can be used for any CSS property that uses a numeric size value. For example, `padding`, `margin`, `border-width`, `margin-left`, etc...

```scss
section {
  @include poly-fluid-sizing('margin-right', (768px: 40px, 1024px: 60px) );
}
```

## 📝 It supports properties with lists of values Thanks @jrutheiser (https://github.com/Jakobud/poly-fluid-sizing/pull/3)

```scss
blockquote {
  @include poly-fluid-sizing('padding', (768px: 30px 15px, 1024px: 50px 25px) );
}
```

## ⚠️ Limitations

- You can't mix value types. For example, trying to use `2em` `font-size` @ `786px` viewport width. SASS just really won't know what to do mathematically when 1 value is using `em` and the other is using `px`.

## 🧪 Unit Tests

Unit tests using [True](https://github.com/oddbird/true) are included. To run tests:

```
npm install
npm test
```

## 📰 Coverage

[Smashing Magazine: Fluid Responsive Typography With CSS Poly Fluid Sizing](https://www.smashingmagazine.com/2017/05/fluid-responsive-typography-css-poly-fluid-sizing/)

[Medium.com/@jakobud CSS Poly Fluid Sizing using calc(), vw, breakpoints and linear equations](https://medium.com/@jakobud/css-polyfluidsizing-using-calc-vw-breakpoints-and-linear-equations-8e15505d21ab)

## 📄 MIT License (see LICENSE file)

---
_Source: https://npm.io/package/poly-fluid-sizing · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._