跳至主要內容

Design with Code

使用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:

1
2
3
4
5
6
7
8
#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有多厲害!

標籤:

留言