PHPStorm 安裝 SASS、SCSS + Compass

許久沒更新博客啦，這兩天研究了下 SASS 和 LESS ，最終選了 SASS，由於相對比較成熟些吧，試了不少坑以後，終於成功了，下面上步驟：

1. 安裝 PHPStorm 的 SASS 插件

好像是自帶了該插件的，若是沒有的話，就打開 setting -> plugins  本身安裝一個吧，就很少說了

2. 安裝 Ruby

Windows 版本下載地址：

http://rubyinstaller.org/downloads/

Linux or Mac 地址：

http://ruby.taobao.org/mirrors/ruby/

我用的是 windows 版最新的 2.2.1 版本

配置好系統環境，將ruby 的bin目錄絕對路徑添加到 path 環境變量中，windows版安裝的時候能夠勾選自動添加

可參考這片博文：

http://www.w3cplus.com/css/css-preprocessor-sass-vs-less-stylus-2.html

3. 安裝 SASS 和 Compass

由於天艹局域網的關係，你可能須要從新設置下更新源地址：

命令行下執行：

gem sources --remove https://rubygems.org/
gem sources -a https://ruby.taobao.org/

能夠參考下這篇文章：

http://devework.com/sass-compass.html

下面執行安裝啦：

gem install sass
gem install compass

4. 新建 Compass + SASS 項目

建立一個項目根目錄，cd 進入後，執行：

compass create your_project_name

會生成三個文件夾和一個 config.rb 文件

在 sass 目錄下存放咱們本身的樣式代碼，編譯後會自動生成到 stylesheets 目錄下，固然你也能夠自定義生成地址

5. 配置 Compass 編譯環境

打開 setting -> Language & Framework 下面有個 Compass 

勾選 Enable 後 設置你本身安裝的 ruby  comopass.bat 路徑 和 當前項目的 config.rb 文件路徑

6. 配置 SASS 環境

打開 setting -> Tools -> FileWatchers

點擊右側綠色的加號 添加一個 compass scss 項目，配置以下

應該使用默認的配置就能夠的了。

working directory 就是你 剛纔用 compass create 的項目目錄（我這裏只是文件夾名字是 less 不要誤解了啊）

7. 開始寫代碼了

@import "compass/reset";
@import "compass";

$fc: #FFF;
$fs: 16px;

body { background-color: #555; }

#panel {
  color: $fc;
  font-size: $fs;
  .title {
    padding: 1em;
    background-color: #888;
    color: $fc;
  }
  .item {
    float: left;
    width: 49%;
    min-height: 3em;
    padding: 1em;
    margin: 1.5%;
    border: solid 1px $fc;
    box-sizing: border-box;
    background-color: #999;
    @include box-shadow(1px 2px 3px #000);
  }
}

一個簡單的測試代碼，每次更改後，會自動編譯，但不會自動生成 css 文件的，你能夠在命令行下進行生成

命令以下：

compass compile

或者強制編譯更新

compass compile --force

而後你再看看 stylesheets 下面就多出一個對應名稱的 css 文件

這個代碼會有很大一堆我就不上代碼了，包含了 reset 的樣式和你本身的樣式 還有註釋都保留了的，由於這是開發環境，

若是是正式環境，須要進行壓縮

下面來改下配置，進入正式環境，將生成的代碼壓縮成一行

打開項目根目錄下的 config.rb 文件

添加兩行代碼：

environment = :development
output_style = (environment == :production) ? :compressed : :expanded

當 environment 爲 :production 時生成的 css 文件將會是壓縮成一行的樣子了。

好了 所有完成，如今開始快速開發你本身的 css 吧

若是你只須要用 SCSS 的話，在第6步你能夠新建 SCSS 配置，下面是配置截圖

下面貼一些其餘參考的文章地址：

http://www.jetbrains.com/phpstorm/help/working-with-sass-and-scss-in-compass-projects.html#d233223e455

http://www.ruanyifeng.com/blog/2012/11/compass.html

http://sass-lang.com/documentation/file.SASS_REFERENCE.html

http://compass-style.org/install/