使用scss來加速寫css吧!

今天來介紹sass/scss，一個讓我回不去過往寫css的語言

###sass/scss是啥?
Sass (Syntactically Awesome Stylesheets)是寫css樣式表的一個程式語言，語法跟css一樣(但多了些功能)，比css來得好寫，且來得更容易閱讀，寫css的Designer不用考慮，可以換了! 但最好是配合compass!
Sass詳細介紹
或見官網。

###sass跟scss差在那?
sass是屬於縮排語法，語法類似haml，sass與haml用意是為了更精簡，快速寫html及css，後來在css3之後延伸出scss，寫法近似css。

簡單說就是一個有花括號、分號(scss)，一個沒有(sass)。

scss 對於會寫 css 的人來說，比較容易上手，本篇就都以scss作為範例的code!

###安裝
需要一台Mac, 在終端機輸入 (windows也能用，但…有空再寫安裝方法吧~)

1	gem install sass

接著進入在你的scss檔案的資料夾，並執行sass

1 2	cd css sass --watch style.scss:style.css

上面指令是sass會開始監視你的style.scss檔案，在檔案儲存時，會馬上把style.scss編譯成style.css，隨時可以按Command + C 取消監視

###scss有幾個主要特色
左邊為原始scss檔，右邊為編譯過後的：

1.Variables 變數

使用$作為開頭當參數

2.Nesting 巢狀結構

很清楚的知道誰是誰的子元素，不用像以前一樣寫一大排重復的開頭了

3.Mixins

其實就像function一樣使用，還可以帶參數

設定預設參數

4.Inheritance 繼承

###另外幾個常用的功能
1.@import

可以將網站的各部份樣式拆開成_head.scss, _body.scss, _foot.scss放置在base資料夾下，可利用@import功能把3個檔納入到main.css裡
noborder

只要在main.scss加上

1
2
3

@import "base/head";
@import "base/body";
@import "base/foot";

_head.scss, _body.scss, _foot.scss 這些檔案都不會被編譯成css，記得檔案名稱需以 _ 底線作開頭!

2.算數

3.顏色功能

1
2

lighten(red, 50{d2cca2257e9463a641a155e6c035546555904f1b60e07d24d5e75a93fd3a0d38}) //增亮50{d2cca2257e9463a641a155e6c035546555904f1b60e07d24d5e75a93fd3a0d38}
darken(blue, 50{d2cca2257e9463a641a155e6c035546555904f1b60e07d24d5e75a93fd3a0d38}) //變暗50{d2cca2257e9463a641a155e6c035546555904f1b60e07d24d5e75a93fd3a0d38}

更多功能參見官方說明

###其它筆記!
更換css壓縮樣式

以expanded壓縮方式

1	sass --watch --style expanded style.scss:style.css

編譯出來的css：

#main {
  color: #fff;
  background-color: #000;
}
#main p {
  width: 10em;
}
...

以compressed壓縮方式

1	sass --watch --style compressed style.scss:style.css

編譯出來的css：

1	#main{color:#fff;background-color:#000}#main p{width:10em}...

要debug怎麼辨?

1.Firefox裝FireSass for Firebug外掛

2.重新編譯

1	sass --watch --debug-info style.scss:style.css #開啟debug模式 (記得要先刪原本編譯出的css)

之後在Firebug裡就可以看見啦

還有線上可以直接測試
http://sass-lang.com/try.html

其實sass/scss只是利於編寫css而產生的一個語言，但今天要寫符合各瀏覽器前綴詞的css，你還是得自已寫@maxin把-moz, -webkit, -o, -ms寫起來，如果遇到要寫css3的gradient呢? 又要可以改參數呢? 那會瘋掉! 因為我寫過，後來就放棄了!
因為有個更強大的Compass來幫忙! 來看看Compass有多厲害!

要debug怎麼辨?

留言