# rework-variant

> Another take on variables in Rework.

Latest version **0.2.2** (published 2013-08-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install rework-variant
pnpm add rework-variant
yarn add rework-variant
bun add rework-variant
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.2 |
| Published | 2013-08-20 |
| First published | 2013-05-31 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 14 |
| Author | Simon Ljungberg |
| Maintainers | simme |
| Keywords | rework, css, variables, var, vars |

## Links

- npm: https://www.npmjs.com/package/rework-variant
- Repository: https://github.com/bloglovin/node-rework-variant
- Issues: https://github.com/bloglovin/node-rework-variant/issues
- npm.io page: https://npm.io/package/rework-variant

## 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

- 0.2.2 (latest) — 2013-08-20
- 0.2.1 — 2013-08-20
- 0.2.0 — 2013-06-03
- 0.1.0 — 2013-05-31

## README

Rework Variant
----------------

A new take on variables for [Rework](https://github.com/visionmedia/rework).

## Installation

Install with npm:

`npm install rework-variant`

## Usage

```js
var rework = require('rework');
var variant = require('rework-variant');
rework(txt).use(variant());
```

### Globals

  The `$globals` rule allows variables to be referenced without a prefix:

```css

$globals {
  blue: #2ccdec;
  orange: #f33c27;
}

a {
  color: $blue;
}

a:hover {
  color: $orange;
}
```

  While other variable rules act as namespaces:

```css
$colors {
  blue: #2ccdec;
  orange: #f33c27;
}

a {
  color: $colors.blue;
}

a:hover {
  color: $colors.orange;
}
```

  Variables may be referenced in most places you'd expect:

```css

$globals {
  phone-portrait: (min-device-width: 320px);
  phone-landscape: (min-device-width: 480px);
}

@media screen and $phone-portrait and $phone-landscape {
  body {
    some: 'stuff';
  }
}
```

## License

MIT

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