Postcss-graceful
Postcss-graceful 是一个能够帮助你更加写出更加简洁、优雅的CSS的样式解决方案。
Postcss-graceful不仅提供了下一代css语法支持,还提供了基础的sass的语法、属性顺时针简写、rem填充、基础图形声明、可定制样式的inline-svg以及bem风格类名转化等实用的功能。
Examples
顺时针简写
/* before */ /* after */
可定制的inline-svg
/* before */@//) ;} /* after */
基础sass语法
/* before */$@ /* after */
Usage
Add Postcss graceful to your build tool:
npm install postcss-graceful --save-dev
Node
;
PostCSS
Add [PostCSS] to your build tool:
npm install postcss --save-dev
Load Postcss graceful as a PostCSS plugin:
;
Gulp
Add [Gulp PostCSS] to your build tool:
npm install gulp-postcss --save-dev
Enable Postcss graceful within your Gulpfile:
var postcss = ; gulp;
options
you can change the plugin's behaviour by the options
var options = {
browser: ['ie > 8', 'last 2 version'],
features: {
"bem": false, //pass boolean false can disable the plugin
"inlineSvg": {
"path": "src/svgs"
}
}
}
Plugins
Postcss-graceful powered by the following plugins (in this order):
- postcss-calc: plugin to reduce calc()