postcss-sass-extend
PostCSS Sass Extend is a PostCSS plugin that allows you to use @extend and placeholder classes as you would in Sass
Last updated 9 years ago by jonathantneal .
CC0-1.0 · Repository · Bugs · Original npm · Tarball · package.json
$ npm install postcss-sass-extend 
SYNC missed versions from official npm registry.

PostCSS Sass Extend Build Status

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

Current Tags

  • 0.0.1                                ...           latest (9 years ago)

1 Versions

  • 0.0.1                                ...           9 years ago
Maintainers (1)
Downloads
Total 1
Today 0
This Week 0
This Month 1
Last Day 0
Last Week 0
Last Month 0
Dependencies (1)
Dev Dependencies (4)
Dependents (1)

© 2010 - cnpmjs.org x YWFE | Home | YWFE