# postcss-responsive-values

> A responsive values plugin for postCSS

Latest version **2.0.0** (published 2017-06-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install postcss-responsive-values
pnpm add postcss-responsive-values
yarn add postcss-responsive-values
bun add postcss-responsive-values
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2017-06-27 |
| First published | 2016-05-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Known vulnerabilities | 0 (+6 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 4 |
| Author | Thomas Roch |
| Maintainers | troch |
| Keywords | postCSS, responsive, function |

## Links

- npm: https://www.npmjs.com/package/postcss-responsive-values
- Repository: https://github.com/troch/postcss-responsive-values
- Homepage: https://github.com/troch/postcss-responsive-values#readme
- Issues: https://github.com/troch/postcss-responsive-values/issues
- npm.io page: https://npm.io/package/postcss-responsive-values

## Dependencies (3)

- [postcss](https://npm.io/package/postcss.md) ~6.0.3
- [is-equal-shallow](https://npm.io/package/is-equal-shallow.md) 0.1.3
- [postcss-value-parser](https://npm.io/package/postcss-value-parser.md) 3.3.0

## Recent versions

- 2.0.0 (latest) — 2017-06-27
- 1.0.1 — 2016-06-16
- 1.0.0 — 2016-05-21

## README

# postcss-responsive-values

[PostCSS] Responsive values

[PostCSS]: https://github.com/postcss/postcss

```css
.my-class-name {
    margin-top: responsive(whitespaceBase);
    padding: responsive(whitespaceSmall) responsive(whitespaceBase) 0;
}
```
Will output (see Usage below)

```css
.my-class-name {
    margin-top: 1.6rem;
    padding: 1rem 1.6rem 0;
}
@media (min-width: 640px) {
    .my-class-name {
        margin-top: 2rem;
        padding: 1.4rem 2rem 0;
    }
}
```

## Usage

In your CSS, wrap responsive values names with `rv()` or `responsive()`. Each responsive value needs to be defined with:
- `value`: a default value
- `queries`: a map of media queries params -> responsive value

If you use multiple responsive values on a same rule declaration, then their media queries need to match or an exception will be thrown.

```js
var responsiveValues = require('postcss-responsive-values');
var values = {
    whitespaceSmall: {
        value: '1rem',
        queries: {
            '(min-width: 640px)': '1.4rem'
        }
    },
    whitespaceBase: {
        value: '1.6rem',
        queries: {
            '(min-width: 640px)': '2rem'
        }
    }
}

postcss([ responsiveValues({ values: values }) ])
```

## Variables

You can use this plugin with variables, just make sure you place this plugin before the postcss variable plugin you use.

See [PostCSS] docs for examples for your environment.

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