# viewport-scaling-scss

> Responsive viewport scaling mixin for SCSS.

Latest version **1.1.2** (published 2019-10-17) · Unlicense license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install viewport-scaling-scss
pnpm add viewport-scaling-scss
yarn add viewport-scaling-scss
bun add viewport-scaling-scss
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.1.2 |
| Published | 2019-10-17 |
| First published | 2018-04-17 |
| Weekly downloads | 0 |
| License | Unlicense |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 5.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | James Walker |
| Maintainers | ilmiont |
| Keywords | scss |

## Links

- npm: https://www.npmjs.com/package/viewport-scaling-scss
- Repository: https://github.com/jh_walker/viewport-scaling-scss
- Issues: https://github.com/jh_walker/viewport-scaling-scss/issues
- npm.io page: https://npm.io/package/viewport-scaling-scss

## Recent versions

- 1.1.2 (latest) — 2019-10-17
- 1.1.1 — 2018-04-17

## README

# viewport-scaling-scss

This project contains a Sass mixin to enable responsive property value scaling based on viewport values.

The mixin allows you to define a floor and ceiling to limit the minimum and maximum values of any given property.

Between the floor and ceiling, the value is automatically scaled according to a given viewport unit.

# Usage

A single mixin `viewport-scaling` is defined:

- `$property` - the name of the property to scale (e.g. `font-size`)
- `$min-value` - the minimum value the property can have, before the floor is reached (e.g. `16px`)
- `$max-value` - the maximum value the property can have, after the ceiling is reached (e.g. `72px`)
- `$bp-floor` - the floor breakpoint at which viewport scaling enables (e.g. `480px`)
- `$bp-ceiling` - the ceiling breakpoint at which viewport scaling disables (e.g. `960px`)
- `$v-unit` - the viewport unit to scale the value by between the floor and ceiling (e.g. `vw`)
- `$mq-prop` - the media query property to determine the floor and ceiling by (e.g. `min-width`)

This works for any properties and units which are compatible with media queries and viewport units.

**Example:**

```scss
h1 {
	@include viewport-scaling(font-size, 16px, 72px, 480px, 960px, vw, min-width);
}
```

Scales the text size using `vw` units when the viewport width is between `480px` and `960px`; `<480px` the size is always `16px`, and `>=960px`, the size is always `72px`.

**Example (2):**

```scss
div {
	@include viewport-scaling(width, 150px, 300px, 480px, 960px, vw, min-width);
	@include viewport-scaling(height, 150px, 300px, 480px, 960px, vw, min-width);
}
```

Scales the width and height using `vw` units when the viewport width is between `480px` and `960px`; `<480px` the dimensions are always `150px`, and `>=960px`, the dimensions are always `72px`.

**CodePen** [View on CodePen](https://codepen.io/ilmiont/pen/ZxMbrE)

This project is released as public domain software under the Unlicense.

©James Walker 2018.

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