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'
        }
    }
});