老成的Sass&Compass

成智遠 Mike
√某某血汗工廠專業打雜

1. 在上千行css中不斷的尋找要修改的地方!
2. 一直在複製貼上同樣的css，只為了class名稱不一樣!
3. 寫css3要一直加前綴字!
4. 一直在看密密麻麻的css好像在玩「威利在哪裡？」
5. css越寫越無聊!
6. 還有很多只是不想繼續說下去……..

Sass是以巢狀結構來撰寫css，其實就是可以省略重複的字串然後寫css
sass css

Sass其實分成兩種格式
Sass? Scss?

簡單說就是一個有花括號、分號(scss)，一個沒有(sass)
scss 對於會寫 css 的人來說，比較容易上手，接下來就都以scss作為範例

但是瀏覽器並不認識Sass

Sass特性
• 巢狀結構
• 變數
• 運算式（＋ , - , * , / , %）
• number函式
• Function函式(@mixin,@include)
• 判斷式(@if,@else if)
• 迴圈(@for,@while,@each)
• 繼承(@extend)
• 載入(@import)
• 太多功能了，等等直接看範例啦!!!

註解
• 單行註解
//這是一行註解，不會編譯結果出現
• 多行註解
/* 這是很多行
用的註解 */

馬上來看sass強大的地方

變數
像是在寫php一樣前面使用＄字號作為宣告變數的開頭
利用變數來管理參數。

＆選擇符
往上一層走，最常用在：hover或是 css 選取器

運算式支援數字的標準算術運算（+、-、*、/、%），而且會
盡可能地自動在單位間換算

有四種狀況下 / 除法才會成立：
1.當其中一方是變數時。
2.數值被括號包住。
3.數值被用在另一個算數式中的一部分。
4.雙方都是變數時

• percentage() //百分比
• round() //四捨五入
• ceil() //無條件進位
• floor() //無條件捨去
• abs() //絕對值
Number函式

比較特殊的⋯⋯
• 文字組合
• 顏色計算
只是我覺得沒啥用所以還是跳過吧，知道有就好

@mixin( function函式 )
這招很重要！相信我！

@mixin將重複使用的部份獨立成為區塊
這樣可以大量減少重複的css

@mixin 裡面可以帶參數，跟function函式一樣用法

還可以給予變數預設值

接下來就是稍微有邏輯的部分

@for 透過＃{ }的方式將字串與變數串接起來

當多數class需要共用某支css，又要可以增加屬於自己的css
時，就需要用到@extend

載入(@import)
->
載入外部其他sass或是變數等檔案，整合分散的sass
test01.scss main.scss main.css
@import “test01.scss”

前面加底線的sass在compiler時候並不會產生實體的檔案
只有在@import時會進行合併

加底線的sass檔案compiler時候並不會產生
實體的檔案
紅色是有加底線
藍色是沒有加底線

看到這裡是不是覺得很方便！

當新增一個專案時，會自動產生1個檔案2個資料
夾，這是系統自動幫你產生好的，我們要看到就
是config.rb。

簡單來介紹config.rb 設定：
1. http_path 指的是根目錄位置。
2. css_dir 指的是你css的路徑。
3. sass_dir 指的是你sass的路徑。
4. images_dir 指的是你圖片的路徑。
5. javascripts_dir 指的是你javascript的路徑。

Encoding.default_external = "UTF-8"
指定編碼為UTF-8，不然SASS寫到中文會變亂碼

output_style 意思則是指你的編譯出來的CSS要用哪種方式呈現出來。
編譯共有下述四種方式：
1. expanded = 一般，每行CSS皆會斷行。
2. nested = 有整理過，易閱讀。
3. compact = 匯出來的CSS檔案大小比上面兩個還小。
4. compressed = 壓縮CSS，將所有的CSS都以一行來排列。

line_comments = false 關閉Sass編譯出來的註解!

Compass是一個sass的擴充套件，簡單的說是很多功能都
幫你寫好了，再加一些常用的功能，並簡化了寫法，讓你加
快寫Sass速度。

Compass超好用功能之一
• Compass&css3 超好用前綴字處理
只要@import “compass/css3”
就使用@include 方式就可以自動幫你產生前綴字

Compass超好用功能之二
• 內建reset
只要@import “compass/ reset.scss”

Compass超好用功能之三
• 一邊挖鼻屎也可以快速做出 CSS Image Sprites ( 只支援png )
• @import “compass/utilities/sprites”; //先import
• $icon-layout : horizontal; //產出的圖片是直得還橫的，直的不用寫
• $icon-spacing : 10px; //每張圖片的間距距離多少px
• @import “icon/*.png”; //選擇圖片路徑
• @include all-icon-sprites(true); //產生圖片

images/icon 路徑下所有的png

Compass還有其他功能但因為不常用就不介紹
了，有興趣的朋友在上網去問google大神吧!

剛開始學習SASS覺得超興奮，馬上用在專案上

等等!!!好像哪裡怪怪
的……

不要把所有的東西全部寫在同一支檔案
將sass有規則性的拆開來分開管理

來看看國外大神是怎麼管理它的sass文件的

簡單的拆法
1. _mixin.scss = 放置全部的變數與Mixin函式
2. _reset.scss = reset.css
3. _extnd.scss = 拿來合併樣式，都放@extend用的檔案
4. _layout.scss = 共用的設定。
5. _color.scss = 網站主要的顏色色系。
6. _hender.scss = hender 。
7. _content.scss = content。
8. _footer.scss = footer。
9. index.scss = 彙整上面所有的scss

SASS最後會全部合併成一支CSS
要維護時在回SASS去找!

Sass是在ruby底下的環境進行開發，所以windows要先安裝好ruby
mac本身就有安裝所以不用裝ruby

windows7安裝ruby需要安裝2.0以下版本
2.0版本在windows7會有無法預期的錯誤。

然後開啟命令提式字元

然後輸入gem install compass
//安裝compass也會順便裝sass，所以我就裝compass就好

開始建立第一個sass專案
先指定路徑到你要放專案的地方
再輸入 compass create ‘專案名字’

先指定路徑到你的專案資料夾
再輸入 compass watch
Sass compiler 將sass轉換成css

Sublime Text 3 sass開發套件
1. SASS
2. SCSS
3. ConvertToUTF8
4. Emmet
5. SassBeautify
6. HTML-CSS-JS Prettify
7. BreaketHighlighter
8. ColorHighlighter

參考資料
1. http://ilandy-chiu-blog.logdown.com/posts/188205-mac-install-sass
2. https://github.com/hlb/sass-doc-zh/blob/master/SASS_REFERENCE_ZH_TW.md
3. http://frontend.inow.tw/sass2/#/
4. http://www.slideshare.net/kurotanshi/compass-sass
5. http://peiwen.lu/how-to-structure-a-sass-project/
6. http://mvcss.ycnets.com/styleguide/
7. http://sam0512.blogspot.tw/2013/10/sass.html

老成的Sass&Compass

Recommended

Recommended

More Related Content

What's hot

What's hot (8)

Viewers also liked

Viewers also liked (20)

老成的Sass&Compass