Sass與Compass學習環境搭建

1. Sass與Compass安裝

1.1. 安裝Ruby

我目前學習用的是window7系統，所以只介紹windows下的安裝。去網址http://rubyinstaller.org/downloads/下載最新版本的Ruby安裝程序並運行。按提示安裝過程當中，在第三個窗口點擊選中中間複選框，如圖：

而後，就能夠在開始->程序中看到Ruby程序了，打開Start Command Prompt with Ruby.

1.2. 安裝SassCompass

輸入:

gem install sass 
gem install compass

若是安裝不成功，那麼多是因爲網絡的緣由，所以須要換一個國內的鏡像。以前國內的Ruby鏡像一直是淘寶在維護，就是這個https://ruby.taobao.org/，不過好像目前不維護了（意思就是無法使用了）,如今國內使用的是https://gems.ruby-china.org/，輸入：

gem sources --add https://gems.ruby-china.org/ --remove https://rubygems.org/

替換鏡像的時候，可能會出現如圖狀況

這個多是https的緣故（具體緣由我也不太清楚），但把 https 換成 http 就能夠了。而後輸入：

gem sources -l
https://gems.ruby-china.org
# 確保只有 gems.ruby-china.org 如圖

而後再次輸入：

gem install sass
gem install compass

// 安裝完成以後，看看是否成功
sass -v
compass -v

好了，Sass與Compass就完成了。

2. 新建Compass項目

2.1 建立Compass工程

• 建立默認工程
  在命令行輸入：

  compass create 項目名稱

  好了，一個compass項目就建立成功了，目錄以下：
  

• 建立定製化的Compass工程
  在命令行輸入：

  compass create 項目名稱 --sass-dir "sass" --css-dir "css" --javascript-dir "js" --images-dir "img"

  目錄以下：
  

• 建立空的Compass工程
  命令行輸入：

  compass create 項目名稱 --bare --sass-dir "sass" --css-dir "css" --javascript-dir "js" --images-dir "img"

  目錄以下：
  

建立完Compass工程以後，咱們還要根據項目須要新建一些文件夾（js、css、img）與文件（index.html、js/main.js），最終的項目目錄大概是這樣的（視我的項目須要）：

2.2 理解config.rb文件

config.rb文件內容：

# 導入其餘compass插件.
require ""

# 部署時把如下路徑設置爲工程根目錄
http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "img"
javascripts_dir = "js"

# 根據我的偏好選擇輸出樣式
# output_style = :expanded or :nested or :compact or :compressed
output_style = :expanded

# 想經過compass幫助工具打開資源相對路徑功能，去掉下面註釋前的「#」
# relative_assets = true

# 想關閉顯示在選擇器原始位置前的調式註釋，去掉下面註釋前的「#」
line_comments = false

# 下面的內容和sass的縮進語法有關，感興趣的自行閱讀，這裏不作介紹
# 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

下面對config.vb文件進行詳細介紹

• 添加須要的插件
  如何插件均可以經過 require "" 方式添加

• 設定名稱和路徑

# 部署時把如下路徑設置爲工程根目錄
http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "img"
javascripts_dir = "js"

上面這些路徑都是相對於HTTP的路徑，因此只要HTTP路徑保持在根目錄下（根目錄用‘/’表示）,其餘文件夾的路徑都是相對於這個跟目錄的路徑。
例如，你須要給工程添加Web字體，在css/fonts下存儲字體文件，那麼你須要添加下面的代碼：

fonts_dir = "css/fonts"

• 設定CSS輸出樣式

  • 默認輸出方式

    // 將config.vb文件不設置或者設置爲：
      output_style = :expanded 
      
      // sass文件
      .main {
       color : #000;
       .content {
           color : #aaa;
       }
      }
      
      // css文件
      .main {
       color : #000;
      }
      .main .content {
       color : #aaa;
      }

  • 嵌套輸出方式

    // 將config.vb文件設置爲：
      output_style = :nested
      
      // sass文件
      .main {
       color : #000;
       .content {
           color : #aaa;
       }
      }
      
      // css文件
      .main {
       color : #000;}
       .main .content {
           color : #aaa;}

  • 緊密輸出方式

    // 將config.vb文件設置爲：
      output_style = :compact
      
      // sass文件
      .main {
       color : #000;
       .content {
           color : #aaa;
       }
      }
      
      // css文件
      .main { color : #000;}
      .main .content {color : #aaa;}

  • 壓縮輸出方式

    // 將config.vb文件設置爲：
      output_style = :compressed
      
      // sass文件
      .main {
       color : #000;
       .content {
           color : #aaa;
       }
      }
      
      // css文件
      .main {color : #000;}.main .content {color : #aaa;}

  • 去掉註釋

    // 將config.vb文件設置爲：
    # 想關閉顯示在選擇器原始位置前的調式註釋，去掉下面註釋前的「#」
      line_comments = false

  • 凸顯註釋

    // 在壓縮CSS文件下，又須要添加註釋，那麼就要用凸顯註釋了
    // sass文件
    /*! 凸顯註釋內容 */
    .main {
        color : #999;
        .content {
            color : #aaa;
        }
    }
    
    // CSS文件
    /*! 凸顯註釋內容*/.main{color:#999;}.main .content{color:#aaa;}

  • 相對資源路徑功能

    // 設置
    # 想經過compass幫助工具打開資源相對路徑功能，去掉下面註釋前的「#」
      relative_assets = true
      
      // 那麼在sass文件中只須要
      background-image: image-url('image.png');
      
      // 生成的CSS文件就變成了
      backgroun-image: url('../img/image.png');

好了，項目環境已經搭建好了，在正式開始以前，還有一點須要注意的。

3. 項目監控

對config.vb文件修改以後，須要先清理.sass-cache文件夾。在命令行輸入:

compass clean

固然，你也能夠手動刪除.sass-cache文件夾。

開啓監控

在命令行輸入：

compass watch