SASS/Compass 基礎篇

一直想要把切版學好，看到有很多人使用SASS
覺得他有許多特性都很不錯，可以讓開發CSS更方便
適合我這種沒有非常熟悉CSS~還未上手的工程師XD

SASS

 -Syntactically Awesome Style Sheets
 -用Ruby開發的程式，是為了簡化 CSS 文件而設計的擴充語言，可以透過編譯變成CSS檔
 -支援兩種語法，SASS和SCSS

Compass
 -SASS的Framework，已經把許多要用到的樣式與架構打包起來
 -簡單說就是寫SASS的工具/方式 (目前我也是用Compass cmd開發~)

SASS的優點

 -語法簡潔，巢狀結構的描述語法
 -變數
 -內建加減乘除語法
 -@mixins，簡單說就是函式
 -@extends，繼承某個樣式類別
 -@import，載入樣式方便做檔案管理

SASS語法和SCSS語法比較

CSS語法

.menu {
    position: relative;
    margin: 10px;
}
.menu ul{
    margin: 0 20px;
}
.menu li {
    float: left;
}

SASS語法

.menu
    position: relative
    margin: 10px
    ul
        margin: 0 20px
        li
            float: left

SCSS語法

.menu{
    position: relative;
    margin: 10px;
    ul{
        margin: 0 20px;
    }
        li{
            float: left;
        }
}

SCSS保留括號和結尾分號，但是縮排巢狀的特性不變，可以和CSS直接相容
如果很習慣CSS的寫法，使用SCSS應該會非常好上手！
我是選擇SASS的語法~喜歡他簡潔！