SCSS 基本教學及應用

如題若不想重覆一堆代碼，並且減少CSS Codeing 時間，SCSS學起來粉重要:
幾個簡單的介紹足以應付目前基本的切版及應用:

1.設定變數(Variable)
$color1:red;
$color2:yellow;
$color3:green;

body{
background-color:$color3;  // 設定綠色為 body 背景，就是好用又簡單


2. 建立及呼叫函數應用 (@Mixin & @include)
@Maxin testfunction( ){    // 建立函數供使用
    background-color:$color2;
    font-size:large;
}

body{
 @Include testfunction( );  // 呼叫函數來使用
}

3.巢狀迴圈(Nesting):
.Container{
　　width;150px;
        margin: 0 auto;
　　.Post {    　　　　    
             border: solid 1px #ccc;
　　     padding: 10px;　　　　  　
　　     background:#eee;　　　　
         　font-size: 12px;　　　　　
　　　　 }
　　}
}

// 分別指定 class  'Container' 以及 .Container 底下 class 'Post' 相關的 CSS 屬性