WebStorm的compass配置

在webstorm中配置compass

WebStorm是功能強大的前端開發專用IDE，擁有即時編輯（chrome）、自動完成、debugger、Emmet、HTML5 支持、JSLint、Less、Sass支持、CoffeeScript支持、Node.JS、單元測試、集成git和svn版本控制等特性，被廣大中國JS開發者譽爲「Web前端開發神器」、「最強大的HTML5編輯器」、「最智能的JavaSscript IDE」等。Compasss是一個優秀的Sass框架，絕不誇張地說，學會了Compass，你的CSS開發效率會上一個臺階。本文將教你把兩款神器結合，讓你的前端開發更上一層樓。

compass介紹

compass的安裝我就不說了，不會的看這裏：compass-style install,裝好以後咱們來用compass建立一個項目，打開命令行窗口，執行以下命令：

compass create <your project name> 

執行完後將會看到compass已經爲咱們建立好了一個項目目錄，開起來是這樣的：

.sass-cache（此目錄linux將會默認隱藏，sass緩存目錄）

sass（此目錄存放sass源文件）

stylesheets（此目錄是生成的css文件目錄）

config.rb（ruby配置文件）

接下來重點看一下config.rb，代碼是這樣的：

# Require any additional compass plugins here. # Set this to the root of your project when deployed: http_path = "/" css_dir = "stylesheets" sass_dir = "sass" images_dir = "images" javascripts_dir = "javascripts" # You can select your preferred output style here (can be overridden via the command line): # output_style = :expanded or :nested or :compact or :compressed # To enable relative paths to assets via compass helper functions. Uncomment: # relative_assets = true # To disable debugging comments that display the original location of your selectors. Uncomment: # line_comments = false # If you prefer the indented syntax, you might want to regenerate this # project again passing --syntax sass, or you can uncomment this: # preferred_syntax = :sass # and then run: # sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass 

文件的頂部能夠用來加載compass插件，如想加入foundation，則加入以下代碼：

require "zurb-foundation" 

而後運行命令compass install foundation即安裝foundation

或者直接運行命令：

compass install zurb-foundation/project-name 

也能夠在建立項目的時候運用如下命令建立一個compass-foundation項目：

gem install ZURB-foundation compass create <project-name> -r zurb-foundation --using foundation --force 

http_path即服務器根目錄，css_dir、sass_dir、images_dir、javascripts_dir爲相應的css、sass、images、js文件目錄，配置以後在sass中圖片的路徑就能夠直接用image-url（image name）引用

output_style爲編譯的css文件類型：

:expanded模式表示編譯後保留原格式；

:nested模式表示有縮進，較好閱讀；

:compact模式表示簡潔格式，編譯出來的css文件大小比上面兩個還小；

:compressed模式表示壓縮過的CSS，生產環境下用。

relative_assets：是否啓用相對路徑

line_comments：是否使用css註釋

preferred_syntax = :sass：Sass有兩種語法格式：sass和scss，compass默認是scss語法（.scss），開啓此配置將會使用sass語法（.sass）。

最後一個配置是sass與scss的轉換

更多的相關配置信息請看官網：compass configuration-reference

scss文件的編譯在項目根目錄運行命令：

compass watch 

當scss源文件發生改變後，compass將自動編譯生css文件

接下來將在webstorm中配置compass開發環境

在WebStorm中配置compass

1. 首先用webstorm打開建立的compass項目，而後依次選擇：

   File->Settings->Compass Support

   勾上Enable Compass support，WebStorm會自動映射ruby compass目錄和項目配置文件config.rb

2. 繼續在此窗口選擇File Watchers選項，而後點擊右邊的加號按鈕，選擇compass scss（若是你是sass語法的話選擇compass sass）

3. 在Program裏面選擇ruby安裝路徑的bin下面的compass.bat，Arguments目錄填入compile $UnixSeparators($FilePath$)$，Working directory填入$ProjectFileDir$，Output paths to refresh填入$FileNameWithoutAllExtensions$.css或者留空，保存以後就配置完成了。個人設置看起來是這樣的：

   若是你的項目不是在根目錄的話，Working directory配置爲$UnixSeparators($FileParentDir$)$，或者就直接把Working directory配置爲$UnixSeparators($FileParentDir$)$吧。

   Tip： Arguments那裏配置用compile命令，以劃線開始的scss文件也會被編譯，爲了不這個問題，我暫時的解決方案是Arguments那裏直接填入watch，可是每次代碼修改保存的時候會在下面出現命令行窗口有點略不爽。

   上面的Immediate file synchronization能夠勾上，這樣代碼修改編譯後會自動同步css文件，不勾的話須要手動同步代碼才能看到最新編譯的css文件。

   下面是個人配置：

1. 可是在項目中會發現不支持compass語法高亮，解決方法是：

   File->Settings->Directories

   選擇右邊的Add Content Root，加入compass樣式目錄，如個人是(不要直接拷貝個人地址，由於你的ruby版本和compass版本可能和我不同，所以路徑也會不同)：

   D:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets 

   而後選擇上方的Mark as Resource Root

   這樣以後@import就不會報錯了，附上個人：

tip

配置webstorm的File Watchers以後對於配置比較低的電腦來講，可能會比較卡，在webstorm右下角的狀態欄有一個相似戴帽子的人頭的東西，能夠把代碼高亮等級調低一點，save mode也能夠勾上等：

發佈