PostCSS Sass Extend

PostCSS Sass Extend is a PostCSS plugin that allows you to use @extend and placeholder classes like you do in Sass.

/* before */

%placeholder {
	color: blue;
}

%unused-placeholder {
	color: yellow;
}

.a {
	@extend %placeholder;

	background-color: black;
}

.b {
	color: red;
}

.c {
	background-color: white;

	@extend %placeholder;
}

.d {
	color: green;
}

/* after */

.a, .c {
	color: blue;
}

.a {

	background-color: black;
}

.b {
	color: red;
}

.c {
	background-color: white;
}

.d {
	color: green;
}

Usage

You just need to follow these two steps to use PostCSS Sass Extend:

1. Add PostCSS to your build tool.
2. Add PostCSS Sass Extend as a PostCSS process.

npm install postcss-sass-extend --save-dev

Node

postcss([ require('postcss-sass-extend')({ /* options */ }) ])

Grunt

Add [Grunt PostCSS] to your build tool:

npm install postcss-sass-extend --save-dev

Enable PostCSS Sass Extend within your Gruntfile:

grunt.loadNpmTasks('grunt-postcss');

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