PostCSS一種更優雅、更簡單的書寫CSS方式

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插件,支持GulpWebpackGruntCompass等,瞭解更多可訪問: 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

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

相關文章
相關標籤/搜索