學完css，進階一點就來學習 CSS 預處理器吧！ 讓CSS 可以像一般程式語言一樣，有變數、函式、迴圈等功能。
剛開始接觸sass時，總會覺得很複雜，要先安裝SASS、如何引入、變數設定的方式、如何分類檔案與功用，每次撰寫完還得等他編譯轉檔為CSS，才能顯示到畫面上。
在利用工作之餘學習時，一樣採用片段式，在基礎語法的部分，就分了4-5天時間看完課程，邊筆記課程提供的語法介紹，即便上完課還是不太會使用。直到假日，再次將全部複習，搭配
官方文件
才能夠更釐清。
介紹 與 安裝
CSS預處理器，增加了一些編寫的特性，也可以說是運用程式化的方式寫CSS。
其中SASS最廣泛使用：Sass包含SASS與SCSS兩種
兩者之間不同之處有以下兩點：
1.文件擴展名不同，Sass 是以
.sass
後綴為擴展名，而SCSS 是以
.scss
後綴為擴展名
2.語法書寫方式不同，Sass 是以嚴格的縮進式語法規則來書寫，不帶大括號({})和分號(;)，而 SCSS 的語法書寫和 CSS 語法書寫方式非常類似。
安裝SASS
在專案底下，安裝
npm install -g sass
查尋安裝是否完成
安裝後，建立index.scss檔案
會出現css檔案
@import
讓我們可以拉出特定區塊或是根據功能性不同拆成不同區塊，來撰寫scss，並利用@import放入主要的scss檔案，最後彙整到同一個css之中。
再用一個css引入(@import)，各個功能
要引入的檔案命名：在要import的檔案要加
_
下方：
_test.scss
為撰寫footer樣式的檔案
.footer h3{
font-style:italic ;
border: blue 3px solid;
main.scss 要引入檔案的主要檔案
@import "test";
轉譯為css(main.css)
.footer h3 {
font-style: italic;
border: blue 3px solid; }
@mixin 與 @include
當在多個地方想使用同一種style的方式。可以組成一組的樣式，並於scss中重複使用。
以 @mixin 開頭，並自定義一個名稱
需要它的時候就用 @include呼叫
調整字體大小（以帶參數的方式）
// 發現h1,h3樣式一樣
@mixin headingStyles($fontSize){
//以代參數方式來放入不同字體大小的變數設定
font-size: $fontSize;
color: $color-secondary;
text-align: center;
.banner h1{
@include headingStyles($font-lg);
.footer h3{
@include headingStyles($font-md);
在css的地方，可以看到字的大小不同
.banner h1 {
font-size: 40px;
color: gray;
text-align: center; }
.footer h3 {
font-size: 30px;
color: gray;
text-align: center; }
Functions
透過函式的建立，可以在需要使用時，不斷地呼叫使用
@function fontSize($size){ @return $size*2; }建立函式
@function fontSize($size){
@return $size*2;
.banner p{
font-size: fontSize($font-sm);
//字的大小會變成 20px*2 =>40px
轉譯為css
.banner p {
font-size: 40px; }
以上為Sass/SCSS 基礎介紹，明天就提供我實戰練習的課程分享啦～
參考資料：
Day27：小事之 Transition 與 Animation
CSS3 Animation
新手也可以輕鬆玩轉 SASS - @mixin and @include
