https://github.com/csstools/postcss-sass-extend
Use @extend and placeholder classes as you would in Sass
https://github.com/csstools/postcss-sass-extend
Last synced: about 1 year ago
JSON representation
Use @extend and placeholder classes as you would in Sass
- Host: GitHub
- URL: https://github.com/csstools/postcss-sass-extend
- Owner: csstools
- License: other
- Archived: true
- Created: 2015-07-10T04:47:23.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2019-06-26T13:04:51.000Z (over 6 years ago)
- Last Synced: 2025-02-14T10:11:59.495Z (about 1 year ago)
- Language: JavaScript
- Size: 117 KB
- Stars: 6
- Watchers: 5
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# PostCSS Sass Extend [![Build Status][ci-img]][ci]
[PostCSS Sass Extend] is a [PostCSS] plugin that allows you to use @extend and placeholder classes like you do in Sass.
```css
/* 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.
```sh
npm install postcss-sass-extend --save-dev
```
### Node
```js
postcss([ require('postcss-sass-extend')({ /* options */ }) ])
```
### Grunt
Add [Grunt PostCSS] to your build tool:
```sh
npm install postcss-sass-extend --save-dev
```
Enable [PostCSS Sass Extend] within your Gruntfile:
```js
grunt.loadNpmTasks('grunt-postcss');
grunt.initConfig({
postcss: {
options: {
processors: [
require('postcss-sass-extend')({ /* options */ })
]
},
dist: {
src: 'css/*.css'
}
}
});
```
[ci]: https://travis-ci.org/jonathantneal/postcss-sass-extend
[ci-img]: https://travis-ci.org/jonathantneal/postcss-sass-extend.svg
[PostCSS]: https://github.com/postcss/postcss
[PostCSS Sass Extend]: https://github.com/jonathantneal/postcss-sass-extend