# postcss-nested-vars

> PostCSS plugin for nested variables.

Latest version **1.0.0** (published 2017-11-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install postcss-nested-vars
pnpm add postcss-nested-vars
yarn add postcss-nested-vars
bun add postcss-nested-vars
```

## Health

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

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2017-11-02 |
| First published | 2015-09-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 (+6 in 1 direct dependencies) |
| Install scripts | no |
| Author | Jed Mao |
| Maintainers | jedmao |
| Keywords | postcss, postcss-plugin, vars, nested, sass, scss |

## Links

- npm: https://www.npmjs.com/package/postcss-nested-vars
- Repository: https://github.com/jedmao/postcss-nested-vars
- Homepage: https://github.com/jedmao/postcss-nested-vars#readme
- Issues: https://github.com/jedmao/postcss-nested-vars/issues
- npm.io page: https://npm.io/package/postcss-nested-vars

## Dependencies (1)

- [postcss](https://npm.io/package/postcss.md) ^6.0.14

## Recent versions

- 1.0.0 (latest) — 2017-11-02
- 0.0.2 — 2015-09-14
- 0.0.1 — 2015-09-14

## README

# postcss-nested-vars

<img align="right" width="135" height="95"
	title="Philosopher’s stone, logo of PostCSS"
	src="http://postcss.github.io/postcss/logo-leftp.png">

[![NPM version](http://img.shields.io/npm/v/postcss-nested-vars.svg?style=flat)](https://www.npmjs.org/package/postcss-nested-vars)
[![npm license](http://img.shields.io/npm/l/postcss-nested-vars.svg?style=flat-square)](https://www.npmjs.org/package/postcss-nested-vars)
[![Travis Build Status](https://img.shields.io/travis/jedmao/postcss-nested-vars.svg)](https://travis-ci.org/jedmao/postcss-nested-vars)
[![codecov](https://codecov.io/gh/jedmao/postcss-nested-vars/branch/master/graph/badge.svg)](https://codecov.io/gh/jedmao/postcss-nested-vars)
[![Dependency Status](https://gemnasium.com/badges/github.com/jedmao/postcss-nested-vars.svg)](https://gemnasium.com/github.com/jedmao/postcss-nested-vars)

[![npm](https://nodei.co/npm/postcss-nested-vars.svg?downloads=true)](https://nodei.co/npm/postcss-nested-vars/)

[PostCSS](https://github.com/postcss/postcss) plugin for nested [Sass-like](http://sass-lang.com/guide#topic-2) variables.

## Introduction

Instead of assuming all variables are global, this plugin assumes the variable for which you are looking can be found in the current nested container context or in one of its ancestors (i.e., root, rule or at-rule).

```scss
$color: red;
a {
	color: $color;
	$color: white;
	color: $color;
	b {
		color: $color;
		$color: blue;
		color: $color;
	}
	color: $color;
}
```

Transpiles into:

```scss
a {
	color: red;
	color: white;
	b {
		color: white;
		color: blue;
	}
	color: white;
}
```

You can also target rule selectors, at-rule params and declaration properties with a special `$(varName)` syntax, same as [`postcss-simple-vars`](https://github.com/postcss/postcss-simple-vars):

```css
$bar: BAR;
$(bar) {}
@media foo$(bar) {
	foo-$(bar)-baz: qux;
}
```

Transpiles into:

```css
BAR {}
@media fooBAR {
	foo-BAR-baz: qux;
}
```

### Related Projects

- [`postcss-simple-vars`](https://github.com/postcss/postcss-simple-vars)
- [`postcss-advanced-vars`](https://github.com/jonathantneal/postcss-advanced-variables)

## Installation

```
$ npm install postcss-nested-vars
```

## Usage

### JavaScript

```js
postcss([ require('postcss-nested-vars')(/* options */) ]);
```

### TypeScript

```ts
import * as postcssNestedVars from 'postcss-nested-vars';

postcss([ postcssNestedVars(/* options */) ]);
```

## Options

### globals

Type: `Object`<br>
Required: `false`<br>
Default: `{}`

Global variables that can be referenced from any context.

### logLevel

Type: `string: <error|warn|silent>`<br>
Required: `false`<br>
Default: `error`

If a variable cannot be resolved, this specifies how to handle it. `warn` and `silent` modes will preserve the original values (e.g., `$foo` will remain `$foo`).

## Testing

Run the following command:

```
$ npm test
```

This will build scripts, run tests and generate a code coverage report. Anything less than 100% coverage will throw an error.

### Watching

For much faster development cycles, run the following commands in 2 separate processes:

```
$ npm run build:watch
```

Compiles TypeScript source into the `./dist` folder and watches for changes.

```
$ npm run watch
```

Runs the tests in the `./dist` folder and watches for changes.

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