Sass 3.3

Sass3.3出一段時間了，而Fire.app目前還是3.2的版本，據說是因為在等Compass 1.0正式版，而如果用Ruby的Compass確實也只能用3.2 版的sass。

不過新東西就是想用看看，上網查了一下並不複雜，所以這次就來試試看Sass 3.3 + Compass 1.0.alpha吧。

Ruby 更新Sass

由於我都是使用Fire.app，所以ruby的Sass還在3.2…，而現在3.3也已經release了，所以直接update就可以了。

sudo gem update sass

安裝Compass alpha

Compass 1.0還尚未release，所以如果像我這樣裝的話，會是屬於0.12版的，而它對應的Sass則是3.2版。

Compass alpha 安裝

如果專案進行不受影響的情況下，可以試試看安裝Compass 1.0(或者平常沒在用Ruby在編譯的可以試試看)。

gem install compass --pre

這樣他就會安裝還在測試中的Compass 1.0，接下來就像平常用的那樣，就可以開始Watch 專案資料夾。

compass watch

測試

Sass 3.3 的新功能就是$map，對我而言它可以減少模組話所需要的code，而且使用更直覺，以下就簡單介紹$map的用法，順便測試Sass 3.3能不能與Compass一起Run。

1.定義$map

$all-colors: (first: #b06,next: #334,third: #666777,)
//首先定義$all-colors
//裡面有三組變數，包含一個名稱以及一個顏色

2.套用至樣式

//利用@each將$class及$color 套用至$all-colors變數裡
@each $class, $color in $all-colors
    //接下來$all-colors的三組名稱及變數，都會套用到以下的樣式
    .btn-#{$class}
        background-color: $color
        +background(linear-gradient($color, darken($color,10%)))
        //套套看Compass的CSS3

3.輸出

如果沒有出錯的話剛剛的Compass watch，就能夠將Sass轉換成CSS了，轉換的結果會下方的CSS。

.btn-first {
    background-color: #bb0066;
    background: -moz-linear-gradient(#bb0066, #88004a);
    background: -webkit-linear-gradient(#bb0066, #88004a);
    background: linear-gradient(#bb0066, #88004a);
}

.btn-next {
  background-color: #333344;
  background: -moz-linear-gradient(#333344, #1d1d27);
  background: -webkit-linear-gradient(#333344, #1d1d27);
  background: linear-gradient(#333344, #1d1d27);
}

.btn-third {
  background-color: #666777;
  background: -moz-linear-gradient(#666777, #4e4f5c);
  background: -webkit-linear-gradient(#666777, #4e4f5c);
  background: linear-gradient(#666777, #4e4f5c);
}

有圖有真相(有沒有好用的Macbook pro截圖軟體…，可以自動壓縮的)