最近玩了一下SASS,感覺不錯,不過CSS3在不同平臺兼容性代碼一直是個頭痛的問題,手寫處理費時費力又容易出錯。
曾經(jīng)一直用sublime text寫html和css,這些問題都有相應(yīng)的插件。用Webstorm寫js,但是來回切換編輯器也比較麻煩。
雖然Webstorm內(nèi)置了css3自動補全功能,當(dāng)輸入user-select時,Webstorm會自動補全:
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
但是很多情況下,這種自動補全并不令人滿意,比如當(dāng)我輸入display:flex;時,Webstorm并不會自動補全為:
- display:-webkit-box;
- display:-webkit-flex;
- display:-ms-flexbox;
- display:flex;
關(guān)于Autoprefixer
Autoprefixer是一個后處理程序,不象Sass以及Stylus之類的預(yù)處理器。它適用于普通的CSS,可以實現(xiàn)css3代碼自動補全。也可以輕松跟Sass,LESS及Stylus集成,在CSS編譯前或編譯后運行。詳情見,https://github.com/postcss/autoprefixer
當(dāng)Autoprefixer添加前綴到你的CSS,還不會忘記修復(fù)語法差異。這種方式,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 同樣會清理過期的前綴,因此下面的代碼:
- a {
- -webkit-border-radius : 5px;
- border-radius : 5px
- }
編譯成:
- a {
- border-radius : 5px
- }
因為經(jīng)過Autoprefixer處理,CSS將僅包含實際的瀏覽器前綴。
具體安裝和配置:
所以嘗試在Webstorm下搜索autoprefixer插件,無果。那就自己手動配置了一個。首先我考慮配置File Watchers,但是不習(xí)慣,原來在sublime text下用autoprefixer都是手動觸發(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其實是postcss的插件,見https://github.com/code42day/postcss-cli
- sudo npm install postcss-cli -g
4.配置External Tools
打開Webstorm設(shè)置,Preferences -> Tools -> External Tools ;點擊新增按鈕,如圖:
填寫具體配置,例如我的配置,如圖:
- Program:填入你的postcss-cli 的PATH;
- Parameters: -u autoprefixer -o $FileDir$/$FileName$ $FileDir$/$FileName$ ,你可以根據(jù)你自己的需要配置,具體參見https://github.com/code42day/postcss-cli
- Working directory :$ProjectFileDir$
配置好后,你可以在css,或sass文件中右鍵,就可以在右鍵菜單中看到External Tools – autoprefixer,點擊搞定,嘎嘎。
5.設(shè)置快捷鍵
右鍵太麻煩的話,可以設(shè)置個快捷鍵,打開Webstorm設(shè)置,Preferences -> Keymap , 搜索External Tools , 配置 autoprefixer即可。 不要和原來的沖突就可以了。
ps:windows下可以直接用autoprefixer的PATH,具體配置