hbuilder和sublime的autoprefixer安裝或者裏sass的$mixin處理瀏覽器前綴

Autoprefixer是一個後處理程序，不象Sass以及Stylus之類的預處理器。它適用於普通的CSS，能夠實現css3代碼自動補全。也能夠輕鬆跟Sass，LESS及Stylus集成，在CSS編譯前或編譯後運行。詳情見，https://github.com/postcss/autoprefixer

這裏說明一下autoprefixer和compass關係，首先他們都能瀏覽器前綴自動補全，區別在於一個是爲css編譯，一個是爲sass編譯。在應用上：若是是手機端，那直接用sass和autoprefixer；若是是pc端，pc段考慮老版本的瀏覽其比較多，用compass比較多。

當Autoprefixer添加前綴到你的CSS，還不會忘記修復語法差別。這種方式，CSS是基於最新W3C規範產生：

a {
background : linear-gradient(to top, black, white);
display : flex
}
::placeholder {
color : #ccc
}
編譯成：

a {
background : -webkit-linear-gradient(bottom, black, white);
background : linear-gradient(to top, black, white);
display : -webkit-box;
display : -webkit-flex;
display : -moz-box;
display : -ms-flexbox;
display : flex
}
:-ms-input-placeholder {
color : #ccc
}
::-moz-placeholder {
color : #ccc
}
::-webkit-input-placeholder {
color : #ccc
}
::placeholder {
color : #ccc
}

　　Autoprefixer 一樣會清理過時的前綴，所以下面的代碼：

 

a {
-webkit-border-radius : 5px;
border-radius : 5px
}

編譯成：

a {
    border-radius : 5px
}

　　

由於通過Autoprefixer處理，CSS將僅包含實際的瀏覽器前綴。

安裝node.js

（略）

安裝Autoprefixer，

見https://github.com/postcss/autoprefixer：
npm install autoprefixer -g

安裝postcss-cli（若是網速很差，會安裝錯誤，我安裝兩次，能夠安裝npm的淘寶鏡像）

Autoprefixer實際上是postcss的插件，見https://github.com/code42day/postcss-cli
npm install postcss-cli -g

配置外部工具

1.打開HBuilder，運行-外部工具-外部工具配置
新建一個外部工具配置
名稱填寫autoprefixer（這個隨意，就是起個名字）
要執行的命令或文件填寫npm安裝目錄\postcss.cmd（mac下應爲npm安裝目錄\postcss)如
C:\Users\wu\AppData\Roaming\npm\postcss.cmd
工做目錄填寫${project_loc}
參數填寫-u autoprefixer -o ${resource_loc} ${resource_loc}

2.sublime就比較簡單

ctrl+shift+p（前提是安裝了install packages），搜索autoprefix css

搜到了點擊安裝，選中當前的css的文件

在ctrl+shift+p，輸入autoprefix css，會有一短暫的卡頓後生成以下圖:

 

使用autoprefixer
點擊你的css、sass文件，而後右鍵，依次點擊外部工具-autoprefixer（此處爲你新建外部工具的名稱）等待編譯，編譯完畢便可

3.利用sass的@mixinhttp://codecloud.net/16133.html