Sass團隊建立了Compass大大提高CSSer的工做效率,你無需考慮各類瀏覽器前綴兼,只須要按官方文檔的書寫方式去寫,會獲得加上瀏覽器前綴的代碼,以下:css
.row { @include display-flex; }
會獲得以下代碼:git
.row { display: -webkit-flex; display: flex; }
可是, 作爲一個長期用原生CSS書寫方式的CSSer,不太習慣去官方查文檔,再以@include
方式書寫。github
那麼問題來了,我只能放棄高效率方式麼?
其實否則, Autoprefixer可以幫助你。
其實, Autoprefixer也僅僅是PostCSS其一個最出名的插件。
來吧, 來看張圖:web
這樣,以一種原生CSS的書寫方式, 而後還能夠幫你解決瀏覽器前綴、IE兼容、如下一代CSS書寫方式兼容如今瀏覽器, 是否是很酷?npm
哦, 其實應該說更簡單、更優雅, 不用查文檔, 不用
@include
。
這個就是Twitter推出的PostCSS, 聽說Google、阿里、Shopify, Twitter就不用說了, 他們都在用PostCSS。json
上圖有用到的PostCSS插件有:gulp
CSSNext, 能夠看到下一代CSS開始支持變量
了,這是否意味着'Sass'、'Less'再也不重要了? 更多方法法可訪問:http://cssnext.io/features/
Autoprefixer, 知名度很高的PostCSS插件,支持Gulp
、Webpack
、Grunt
、Compass
等,瞭解更多可訪問: https://github.com/postcss/autoprefixer
CSS Grace, 國內大神寫的實現了大部分經常使用的 IE Hack
的插件, 中文文檔: https://github.com/cssdream/cssgrace/blob/master/README-zh.md瀏覽器
固然還有更多PostCSS插件可訪問: http://postcss.partssass
好了,下面看下PostCSS一些基本使用方法吧:less
構建工具爲Gulp
基於PostCSS
PostCSS插件 CSSNext 用下一代CSS書寫方式兼容如今瀏覽器
PostCSS插件 Autoprefixer 爲CSS補全瀏覽器前綴
PostCSS插件 CSS Grace 讓CSS兼容舊版IE
{ "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" }
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