PostCSS: 跨瀏覽器安全色性

標籤：源碼   function   turn   process   ret   src   ice   author   tar   

PostCSS工具

如果你不想從頭開始手動設定您的項目，你可以下載本教程中提供的源碼附件，提取Gulp或Grunt項目到一個空的檔案夾中。

然後在命令終端運行：npm install。

安裝外掛程式

不管你是使用Gulp還是Grunt，在你項目的目錄下運行下面的命令：

npm install autoprefixer postcss-color-rgba-fallback postcss-opacity postcss-pseudoelements postcss-vmin pixrem postcss-will-change --save-dev

現在已經安裝好外掛程式了，下面我們繼續將這些外掛程式載入到您的項目中。

通過Gulp載入外掛程式

如果你使用的是Gulp，在你的gulpfile.js載入這些變數：

var autoprefixer = require(‘autoprefixer‘);var color_rgba_fallback = require(‘postcss-color-rgba-fallback‘);var opacity = require(‘postcss-opacity‘);var pseudoelements = require(‘postcss-pseudoelements‘);var vmin = require(‘postcss-vmin‘);var pixrem = require(‘pixrem‘);var will_change = require(‘postcss-will-change‘);

並且將這些變數的名稱添加到你的processors數組中：

var processors = [    will_change,    autoprefixer,    color_rgba_fallback,    opacity,    pseudoelements,    vmin,    pixrem];

做一個快速測試，在命令終端運行gulp css，檢查style.css檔案有沒有放到dest檔案夾中。

【參考文章1】

【參考文章2】

package.json 代碼：

 1 { 2   "name": "gulppostcssstarter", 3   "version": "1.0.0", 4   "description": "Basic starter project for PostCSS use via Gulp", 5   "author": "Kezz Bracey", 6   "license": "MIT", 7   "devDependencies": { 8     "autoprefixer": "^5.2.0", 9     "gulp": "^3.9.0",10     "gulp-postcss": "^5.1.10",11     "pixrem": "^1.3.1",12     "postcss-color-rgba-fallback": "^1.3.1",13     "postcss-opacity": "^2.0.1",14     "postcss-pseudoelements": "^2.2.0",15     "postcss-vmin": "^1.0.0",16     "postcss-will-change": "^0.2.0"17   }18 }

gulpfle.js的配置：

 1 var gulp = require(‘gulp‘); 2 var postcss = require(‘gulp-postcss‘); 3  4 var autoprefixer = require(‘autoprefixer‘); 5 var color_rgba_fallback = require(‘postcss-color-rgba-fallback‘); 6 var opacity = require(‘postcss-opacity‘); 7 var pseudoelements = require(‘postcss-pseudoelements‘); 8 var vmin = require(‘postcss-vmin‘); 9 var pixrem = require(‘pixrem‘);10 var will_change = require(‘postcss-will-change‘);11 12 gulp.task(‘css‘, function () {13     var processors = [14         will_change,15         autoprefixer({16             browsers: [‘> 1%‘,‘last 2 versions‘, ‘ie >=8‘, ‘Firefox > 20‘, ‘Chrome > 31‘]17         }),18         color_rgba_fallback,19         opacity,20         pseudoelements,21         vmin,22         pixrem23     ];24     return gulp.src(‘./src/*.css‘)25         .pipe(postcss(processors))26         .pipe(gulp.dest(‘./dest‘));27 });

 

PostCSS: 跨瀏覽器安全色性