Sass & Compass 初步使用

1、需安裝的東西

• ruby（mac自帶）

• gem（sources可能被牆）

• sass

• compass

查看安裝狀況：

ruby -v
gem -v
sass -v
compass -v

查看 gem 的 sources：

gem sources

可參考資料

• 如何安裝 Ruby、Sass、Compass（Windows，使用 Ruby China 鏡像）

2、實操

1. 使用終端進入選定的目錄

2. compass 初始化

3. sass 編寫

針對1：

• mac可能用到的命令：

cd xxx
ls

• win可能用到的命令：

E：
cd xxx
dir

針對2：

• 進入到特定目錄後，輸入命令：

compass init    // 方式1
compass create [project_name]    // 方式2，會建立一個以project_name命名的compass目錄

• config.rb是compass目錄的配置文件，可根據我的需求修改（重要）

針對3：

• 體驗sass的強大吧（與css比較）

// reset
@import "compass/reset";

// css3圓角
@import "compass/css3";
.box{
    @include border-radius(5px);
}

// css3漸層
.box{
    @include background(linear-gradient(lighten(red, 20%), red)); 
}

// sprite
@import "icons/*.png";
@include all-icons-sprites;  //all-後面的‘icons’表明文件夾名字

• compass會監測目錄下文件變更而進行實時編譯（可能須要watch一下）

可參考資料：

• 用強大的compass+sass寫css