PostCSS
什么是postcss
postcss 一种对css编译的工具,类似babel对js的处理。它主要依赖插件来进行操作。当你需要某些功能的时候,只需配置相应的插件即可。它有非常丰富的插件,可以涵盖你的开发过程的各个方面。即使没有满足你需要的插件,你也完全可以使用 JavaScript 来开发自己的插件就可以了。
它可以作为一款 CSS 前置处理器( preprocessor ) 使用, 就像 Sass 和 Less 等一样,使用 postcss-simple-vars, postcss-mixins, postcss-nested, postcss-sass-extend 等插件来实现 Sass 提供的 变量, mixin,选择器嵌套,extend 等功能。如果你不想自己配置,也可以使用一款已经打包好这些功能, 语法与 Sass 相似的插件precss 来实现preprocessor。
PostCSS 一般不单独使用,而是与已有的构建工具进行集成。PostCSS 与主流的构建工具,如 Webpack、Grunt 和 Gulp 都可以进行集成。完成集成之后,选择满足功能需求的 PostCSS 插件并进行配置。
它也可以作为一款 后处理器 (post processor)来使用,配合插件,满足你的需求:
针对浏览器兼容:
如果你想使用未来的 CSS 特性那你可以使用cssnext ;
Autoprefixer,它根据 Can I use… Support tables for HTML5, CSS3, etc 上的数据给属性添加相对应的浏览器前缀。
对老版本的浏览器没有的属性,有postcss-color-rgba-fallback, postcss-will-change等插件对其回退;
针对 CSS 优化
合并媒体查询(media query)有 css-mqpacker 插件;
删掉空格分号,最小化 CSS 文件,有cssnano插件;
提高开发效率
模块化 CSS 有 postcss-import 插件通过@import整合所有模块;
简写 CSS 属性,比如margin-left写作ml, 有postcss-crip插件;
引入第三方字体,postcss-font-magician 插件可以只指定font-family即可,@font-face的代码由插件完成;
生成各种方向的图形, 有postcss-triangle插件生成三角形, postcss-circle生成圆形
生成网格系统,有lost 插件
通过 PostCSS 强大的插件体系,可以对 CSS 进行各种不同的转换和处理,从而尽可能的把繁琐复杂的工作交由程序去处理,而把开发人员解放出来。
postcss在webpack当中的配置
var path = require('path');
module.exports = {
context: path.join(__dirname, 'app'),
entry: './app',
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.css$/,
loader: "style-loader!css-loader!postcss-loader"
}
]
},
postcss: function () {
return [require('autoprefixer')];
}
}
postcss插件参考
postcss-modules and react-css-modules automatically isolate selectors within components.
postcss-autoreset is an alternative to using a global reset that is better for isolatable components.
postcss-initial adds all: initial support, which resets all inherited styles.
autoprefixer adds vendor prefixes, using data from Can I Use.
postcss-preset-env allows you to use future CSS features today.
precss contains plugins for Sass-like features, like variables, nesting, and mixins.
postcss-assets inserts image dimensions and inlines files.
postcss-sprites generates image sprites.
postcss-inline-svg allows you to inline SVG and customize its styles.
postcss-write-svg allows you to write simple SVG directly in your CSS.
postcss-syntax switch syntax automatically by file extensions.
postcss-html parsing styles in