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截圖軟體…,可以自動壓縮的)