baiyaaaaa/postcss-advanced-variables

PostCSS plugin for Sass-like variables, conditionals, and iteratives

Advanced Variables

Advanced Variables converts Sass-like variables and conditionals into CSS.

/* before */

$dir: assets/icons;

@each $icon in (foo, bar, baz) {
	.icon-$icon {
		background: url('$dir/$icon.png');
	}
}

@for $index from 1 to 5 by 2 {
	.col-$index {
		width: $(index)0%;
	}
}

/* after */

.icon-foo {
	background: url('assets/icons/foo.png');
}

.icon-bar {
	background: url('assets/icons/bar.png');
}

.icon-baz {
	background: url('assets/icons/baz.png');
}

.col-1 {
	width: 10%;
}

.col-3 {
	width: 30%;
}

.col-5 {
	width: 50%;
}

Usage

Add Advanced Variables to your build tool:

npm install postcss-advanced-variables --save-dev

Node

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

PostCSS

Add PostCSS to your build tool:

npm install postcss --save-dev

Load Advanced Variables as a PostCSS plugin:

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

Gulp

Add Gulp PostCSS to your build tool:

npm install gulp-postcss --save-dev

Enable Advanced Variables within your Gulpfile:

var postcss = require('gulp-postcss');

gulp.task('css', function () {
    return gulp.src('./css/src/*.css').pipe(
        postcss([
            require('postcss-advanced-variables')({ /* options */ })
        ])
    ).pipe(
        gulp.dest('./css')
    );
});

Grunt

Add Grunt PostCSS to your build tool:

npm install grunt-postcss --save-dev

Enable Advanced Variables within your Gruntfile:

grunt.loadNpmTasks('grunt-postcss');

grunt.initConfig({
    postcss: {
        options: {
            processors: [
                require('postcss-advanced-variables')({ /* options */ })
            ]
        },
        dist: {
            src: 'css/*.css'
        }
    }
});

Options

variables

Type: Object
Default: {}

Specifies your own global variables.

require('postcss-advanced-variables')({
	variables: {
		'site-width': '960px'
	}
});

/* before */

.hero {
	max-width: $site-width;
}

/* after */

.hero {
	max-width: 960px;
}