postcss-variables

PostCSS Variables

Converts variables into CSS.

/* before (nesting requires postcss-nested) */

$dir: assets/icons;
$color: blue;

.block {
	background: url('$(dir)/foo.png');
	&__elem {
		$color: green;
		color: $color;
	}
	&__elem2 {
		color: $color;
	}
}

/* after */

.block {
	background: url('assets/icons/foo.png');
	&__elem {
		color: green;
	}
	&__elem2 {
		color: blue;
	}
}

Usage

Add PostCSS Variables to your build tool:

npm install postcss-variables --save-dev

Node

require('postcss-variables')({ /* options */ }).process(YOUR_CSS);

PostCSS

Add PostCSS to your build tool:

npm install postcss --save-dev

Load PostCSS Variables as a PostCSS plugin:

postcss([
	require('postcss-variables')({ /* options */ })
]);

Options

globals

Type: Object
Default: {}

Specifies your own global variables.

require('postcss-variables')({
	globals: {
		siteWidth: '960px',
		colors: {
			primary: '#fff',
			secondary: '#000'
		}
	}
});

/* before */

.hero {
	color: $colors.primary;
	max-width: $siteWidth;
}

/* after */

.hero {
	color: #fff;
	max-width: 960px;
}

Note: Please refer to Advanced Variables for more advanced features. This library is essentially a simplification and alteration of that plugin. Thank you to the author for making it available.