sass团队创建了compass大大提升csser的工作效率,你无需考虑各种浏览器前缀兼,只需要按官方文档的书写方式去写,会得到加上浏览器前缀的代码,如下:
.row { @include display-flex;}
会得到如下代码:
.row { display: -webkit-flex; display: flex;}
但是, 做为一个长期用原生css书写方式的csser,不太习惯去官方查文档,再以@include方式书写。
那么问题来了,我只能放弃高效率方式么?
其实不然, autoprefixer能够帮助你。
其实, autoprefixer也仅仅是postcss其一个最出名的插件。
来吧, 来看张图:
这样,以一种原生css的书写方式, 然后还可以帮你解决浏览器前缀、ie兼容、以下一代css书写方式兼容现在浏览器, 是不是很酷?
哦, 其实应该说更简单、更优雅, 不用查文档, 不用@include。
这个就是twitter推出的postcss, 据说google、阿里、shopify, twitter就不用说了。
下面看下postcss一些基本使用方法:
准备 构建工具为gulp
基于postcss
postcss插件 cssnext 用下一代css书写方式兼容现在浏览器
postcss插件 autoprefixer 为css补全浏览器前缀
postcss插件 css grace 让css兼容旧版ie
package.json { name: postcss usage, version: 1.0.0, description: postcss cssnext, main: gulpfile.js, dependencies: { autoprefixer: ^5.2.0, autoprefixer-core: ^5.2.1, cssgrace: ^2.0.2, gulp: ^3.9.0, gulp-less: ^3.0.3 }, devdependencies: { autoprefixer: ^5.2.0, autoprefixer-core: ^5.2.1, cssgrace: ^2.0.2, cssnext: ^1.8.4, gulp-postcss: ^6.0.0, postcss: ^4.1.16 }, scripts: { test: echo \error: no test specified\ && exit 1 }, keywords: [ postcss, gulp ], author: givebest, license: isc}
gulpfile.js var gulp = require('gulp');var postcss = require('gulp-postcss');var autoprefixer = require('autoprefixer');var cssgrace = require('cssgrace');var cssnext = require('cssnext');gulp.task('css', function () { var processors = [ autoprefixer({browsers: ['last 3 version'], cascade: false, remove: false }), cssnext(), cssgrace ]; return gulp.src('./src/css/*.css') .pipe(postcss(processors)) .pipe(gulp.dest('./dist'));});gulp.task('watch', function(){ gulp.watch('./src/css/*.css', ['css']);});gulp.task('default', ['watch', 'css']);
安装 npm install
使用 gulp
详细项目地址在: https://coding.net/u/givebest/p/postcss-usage/git