還記得前兩週我都在學習如何手刻RWD網頁，不只有許多的HTML結構要去注意。
就連CSS樣式也希望能使用模組化的方式建構。
總之，就是要讓code不要太冗長不好管理。

在這個時候就遇到了一個叫做SCSS的好東西！

還記得剛開始碰程式時，有跟著別人使用過一次的經驗。
那時候只覺得...
恩？
當工程師覺得一件事很麻煩費時的時候，居然是再用另一種語言去簡化它嗎？！
在我看起來怎麼變得更麻煩...
然後腦袋還是打結，程式碼還是繼續看不懂...

之後持續看了各種前端的課程又過了半年，練習了一些版型，開始接觸了RWD...
恩！開始操作SCSS的時候真的猶如天降甘霖！！

當我意識到SCSS可以大大簡化我寫CSS的時間時，我馬上自告奮勇地在心裡下了決定。
下次再寫RWD的時候絕對要用上SCSS！

初期在寫css時，越寫到後面就越來越長，
選擇器也要一直選一直選、選了又選的無奈感...
明明只是簡單的一頁式網頁，都有可能讓css變得又臭又長。

當我開始寫RWD時，又更難了。因為要設定至少兩個斷點，
要滑到最下面寫pad的寬度，又要滑到更下面寫mobile的寬度。
真的深刻體會前人所說，花最長時間的不是寫code，是找code和看code。

而SCSS新增了嵌套、變數、混入、共用、函式這幾大功能，
就大大解決了很多傳統css會遇到的問題。

變數-Variables
有點像是JavaScript一樣，可以用＄字號取一個變數名稱，然後賦予一個值。
通常會設定顏色、字型，或各種需要重複用到的東西上面。

$font-style: 'Roboto', sans-serif;
$primary:rgb(65, 103, 136);

h1{
    font-family: $font-style;
    color: $primary;
}

SCSS使用＄字號命名變數的寫法

h1{
    font-family:"Roboto",sans-serif;
    color:#416788
    }

編譯後的css

嵌套-Nesting
嵌套的使用就像我們平常在寫HTML的階層一樣，可以更清楚顯示階層，也避免一直重複選擇器的困擾。

.nav-link{
    display: flex;
    list-style: none;
    
    li{
        margin-right: 10px;
    }
    a{
        display: block;
        text-decoration: none;
        color: black;
        padding: 5px;
    }
}

SCSS可以將樣式用階層的方式撰寫，減少重複選取問題。

.nav-link {
    display: flex; 
    list-style: none; 
}
    
.nav-link li { 
    margin-right: 10px; 
}
    
.nav-link a { 
    display: block; 
    text-decoration: none; 
    color: black; 
    padding: 5px; 
}

編譯後的css

混入-Mixin
當一段css會一直被重複使用到，就可以把那段css設定成一個mixin，
可以在其中輸入不同的“參數”去做出改變，甚至還可以讓RWD撰寫起來更加輕鬆。

@mixin square($W-size, $H-size, $color, $radius: 0) {
    width: $W-size;
    height: $H-size;
    background: $color;

    @if $radius != 0 {
      border-radius: $radius;
    }
}

.box {
    @include square(100px, 100px, red, $radius: 4px);
}  
    
.card {
    @include square(200px, 300px, rgb(220, 223, 220), $radius: 10px);
}

SCSS將類似樣式組成@mixin，運用參數去改變不同之處。

.box {
  width: 100px;
  height: 100px;
  background: red;
  border-radius: 4px; 
}

.card {
  width: 200px;
  height: 300px;
  background: #dcdfdc;
  border-radius: 10px; 
}

編譯後的css

混入-Mixins運用在RWD的寫法

@mixin pad{
    @media(max-width:768px){
      @content;
    }
  }
  @mixin mobile{
    @media(max-width:576px){
      @content;
    }
  }
  
.box {
    height: 100px;
    width: 100px;
    background: #000;
    
    @include pad{
        background: red;
    }
    
    @include mobile{
        background: yellow;
    }
  }

SCSS用@Mixin和@content的搭配，
當設定不同斷點時可以直接寫在要變換的樣式之下。
就不用一直把css拉到最下面寫樣式，或是重複寫@midia的斷點。

.box {
  height: 100px;
  width: 100px;
  background: #000; 
  }
  @media (max-width: 768px) {
    .box {
      background: red; 
      } 
  }
  @media (max-width: 576px) {
    .box {
      background: yellow; 
      } 
  }

編譯後的css

共用-Extends
當選擇器中包含了一些相同樣式時，又不想重複的寫同個樣式，就可以使用上這個功能。

%message-shared {
    border: 1px solid rgb(0, 0, 0);
    padding: 20px;
  }
  
  .box {
    @extend %message-shared;
}
  .error {
    @extend %message-shared;
    border-color: red;
}
  .banner {
    @extend %message-shared;
    padding: 50px;
}
  .btn {
    @extend %message-shared;
    border-radius: 20px;
}

SCSS使用%寫樣式，之後可以重複使用。也可以之後寫上另外要更改的樣式。

.box, .error, .banner, .btn {
  border: 1px solid black;
  padding: 20px; 
  }

.error {
  border-color: red;
  }

.banner {
  padding: 50px;
  }

.btn {
  border-radius: 20px; 
  }

編譯後的css

混入-Mixins 與 共用-Extends
這兩個其實有點像，都可以把相同樣式打包起來重複使用，
但是mixins是可以加入不同“參數”去做變化，而共用卻是比較適用於“一模一樣”的樣式更加適合。
能理解最後的code會怎麼呈現之後可以更很好理解。

.box {
  border: 1px solid black;
  padding: 20px;
  }

.error {
  border: 1px solid black;
  padding: 20px;
  border-color: red;
  }

.banner {
  border: 1px solid black;
  padding: 20px;
  padding: 50px; 
  }

.btn {
  border: 1px solid black;
  padding: 20px;
  border-radius: 20px; 
  }

Mixin的方式編譯出來的css，同樣的樣式重複再選擇器中出現。

.box, .error, .banner, .btn {
  border: 1px solid black;
  padding: 20px; 
  }

.error {
  border-color: red; 
  }

.banner {
  padding: 50px; 
  }

.btn {
  border-radius: 20px; 
  }

共用的方式編譯出的css，把相同樣式的選擇器寫在一起，大大省掉了相同的code。
另外修改的樣式，也因為權重的先後而有所更改。

函式-Function
最後一個是函式，我並沒有使用過。
看起來更像是混入和變數的混合使用方法...
所以這邊沒辦法給大家很好的介紹：（

下方是我學習SCSS時找到的一些參考資料能更好的解說以上內容。
在此附上我在學習SCSS時找到的一些資料。

最後提醒：
SCSS是需要經過編譯，HTML才能辨識出樣式的，
所以link的是經過編譯後的css，並不是SCSS本身。

下方的參考資料也附上了一些如何設定的解說！

那我們就下次見嚕～

參考資料：
使用VSCode外掛自動編譯SASS/SCSS
SCSS重點筆記
Sass/SCSS 基本語法介紹，搞懂CSS 預處理器
如何利用 Sass 的 @mixin 功能，讓撰寫 RWD 網站變的輕而易舉