webstormsass編譯

① webstorm 配置sass輸出css文件格式配置

本文前提 是電腦里已經順利安裝了ruby,sass等之後，再進行webstorm中配置sass的watcher，以及改變watcher中的默認選項；如果以上都還沒有做，可以自行網路解決，很容易找到的；

本文使用的webstorm為11.0版本

點擊左上角的 *File→Settings→File Watchers ***

在彈窗的窗口的右上角點擊綠色的 『+』 號,然後選擇scss

然後按照下圖進行操作：

其中黃色的地方都要填好，program那裡是你安裝ruby中響應的scss.bat的路徑，如果安裝ruby時，你不是按照默認c盤路徑按裝的話，那麼那裡是需要需改的；

按道理其中只有兩個地方是需要修改的,其他我沒有改過,都是默認就是那樣的 ：

1、Arguments:

可以配置編譯後的文件的輸出路徑,我這里寫的是:

--no-cache --update --sourcemap --watch : css$FileNameWithoutExtension$.css

注意, 後面有個冒號,然後 表示的是 scss文件所在的文件夾的父級文件夾 ,而不是scss文件的父文件夾.

舉個例子,我的項目叫lianxi,裡面有個sass文件夾,裡面存放scss文件,那麼按照這樣配置的結果, www.scss 所在的文件夾就是sass,sass的父文件夾就是lianxi,然後找到lianxi下的css文件夾,編譯後的 www.css 文件就會在這里.

如圖所示：

2、 Output paths to refresh:

改成這樣: .css: .css.map

經過以上配置就實現了， webstorm支持sass的同步編譯,也就是即寫即編譯,並且可以指定編譯後的css的目錄.

這里需要注意兩點：

1》同步編譯只能在項目文件夾下,也就是webstorm左側打開的項目.隨便打開一個項目外的文件是不行的.

2》這個和webstorm沒有什麼關系,就是sass編譯不能帶有中文,無論是路徑名,文件名,文件里的內容,都不能識別中文,如果要修改它也不是不可以,但我覺得不用中文也挺好的,養成好習慣嘛.

原文網址摘自於 http://www.jianshu.com/writer#/notebooks/8901255/notes/8479561

② 前端開發常用哪些工具軟體

前端開發的編譯器在選擇上還是很多的。在學校里，老師主要講三個前端開發軟體：

1、WebStorm

幫助編寫HTML、CSS、Less、Sass和Stylus代碼，並且支持Node.js和主流框架，如React、Angular、Vue.js、Meteor等。與IntelliJ IDEA同源，繼承了IntelliJ IDEA強大的JS部分的功能。但是付費軟體。

2、IntelliJ idea

頁面很簡單，乍一看像是一個記事本，它也確實可以當記事本用。有很多特色插件可以使用，支持多種編程語言的語法高亮顯示，具有代碼折疊功能。

2、HBuilderX

HBuilderX是DCloud（數字天堂）推出的一款支持HTML5的Web開發IDE。HBuilder的編寫用到了Java、C、Web和Ruby。HBuilder本身主體是由Java編寫。是HBuilder下一代版本，具有輕便、適合vue框架的特點。