最近玩了一下SASS，感覺不錯(cuò)，不過(guò)CSS3在不同平臺(tái)兼容性代碼一直是個(gè)頭痛的問(wèn)題，手寫處理費(fèi)時(shí)費(fèi)力又容易出錯(cuò)。
曾經(jīng)一直用sublime text寫html和css，這些問(wèn)題都有相應(yīng)的插件。用Webstorm寫js，但是來(lái)回切換編輯器也比較麻煩。
雖然Webstorm內(nèi)置了css3自動(dòng)補(bǔ)全功能，當(dāng)輸入user-select時(shí),Webstorm會(huì)自動(dòng)補(bǔ)全：

1. -webkit-user-select: none;
2. -moz-user-select: none;
3. -ms-user-select: none;
4. user-select: none;

但是很多情況下，這種自動(dòng)補(bǔ)全并不令人滿意，比如當(dāng)我輸入display:flex;時(shí)，Webstorm并不會(huì)自動(dòng)補(bǔ)全為：

display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;

關(guān)于Autoprefixer

Autoprefixer是一個(gè)后處理程序，不象Sass以及Stylus之類的預(yù)處理器。它適用于普通的CSS，可以實(shí)現(xiàn)css3代碼自動(dòng)補(bǔ)全。也可以輕松跟Sass，LESS及Stylus集成，在CSS編譯前或編譯后運(yùn)行。詳情見，https://github.com/postcss/autoprefixer

當(dāng)Autoprefixer添加前綴到你的CSS，還不會(huì)忘記修復(fù)語(yǔ)法差異。這種方式，CSS是基于最新W3C規(guī)范產(chǎn)生：

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 同樣會(huì)清理過(guò)期的前綴，因此下面的代碼：

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

編譯成：

a {
border-radius : 5px
}

因?yàn)榻?jīng)過(guò)Autoprefixer處理，CSS將僅包含實(shí)際的瀏覽器前綴。

具體安裝和配置：

所以嘗試在Webstorm下搜索autoprefixer插件，無(wú)果。那就自己手動(dòng)配置了一個(gè)。首先我考慮配置File Watchers，但是不習(xí)慣，原來(lái)在sublime text下用autoprefixer都是手動(dòng)觸發(fā)的，所以后面我配置了External Tools。

1.首先當(dāng)然是安裝node.js;

（略）

2.安裝Autoprefixer，

見https://github.com/postcss/autoprefixer：

sudo npm install autoprefixer -g

要不要加sudo，或者是不是全局安裝（-g）那就看你自己的環(huán)境了。

npm太慢，我是用淘寶的 NPM 鏡像的https://npm.taobao.org/

3.安裝postcss-cli

Autoprefixer其實(shí)是postcss的插件，見https://github.com/code42day/postcss-cli

sudo npm install postcss-cli -g

4.配置External Tools

打開Webstorm設(shè)置，Preferences -> Tools -> External Tools ;點(diǎn)擊新增按鈕，如圖：

填寫具體配置，例如我的配置，如圖：

1. Program:填入你的postcss-cli 的PATH；
2. Parameters: -u autoprefixer -o $FileDir$/$FileName$  $FileDir$/$FileName$ ，你可以根據(jù)你自己的需要配置，具體參見https://github.com/code42day/postcss-cli
3. Working directory :$ProjectFileDir$

配置好后，你可以在css，或sass文件中右鍵，就可以在右鍵菜單中看到External Tools – autoprefixer，點(diǎn)擊搞定，嘎嘎。

5.設(shè)置快捷鍵

右鍵太麻煩的話，可以設(shè)置個(gè)快捷鍵，打開Webstorm設(shè)置，Preferences -> Keymap ， 搜索External Tools ， 配置 autoprefixer即可。 不要和原來(lái)的沖突就可以了。

ps：windows下可以直接用autoprefixer的PATH，具體配置