在鐵人賽正式開始之前，想先寫一下SCSS。
因為我的CSS全部都是SCSS寫的...怕大家看不懂馬上棄看 QQ
這一篇是簡易的SCSS小抄說明，主要針對文章中出現SCSS的部分做簡單說明。

會用SCSS是之前公司內部的風格，而SCSS用過真的回不去，主要原因是：

1. 可階層化，可折疊！
2. 可模組化，重複利用！

SCSS是CSS 預處理器的一種，可以說是 CSS 語法的擴充，
是為了彌補 CSS 在大型專案維護性的不足，
SCSS的變數、混入、繼承等功能，
讓我們可以更有結構地撰寫簡潔、清晰且好維護的 CSS 程式碼。
（參考：Sass/SCSS 基本語法介紹，搞懂CSS 預處理器）

起手式：SCSS環境

想要練習SCSS的話，最快的方法是Codepen CSS的設定按鈕（右上角的 * )
選取SCSS編譯器就可以使用。（會幫你把SCSS變成瀏覽器看懂的語言）

使用 Vue-Cli 在安裝時就會問你要不要SCSS，也可以 npm/yarn SCSS套件，
並在撰寫的時候宣告： Vue Cli傳送器

一般寫網頁的時候就是要另外安裝SCSS 編譯器，搭配VS code套件。
我是用Live Sass Compiler
也可以用Gulp快速轉譯打包SCSS，可以看看這個影片：
Browsersync + Sass + Gulp in 15 minutes

階層化 - 折疊起來讓code好清楚！

SCSS 最基本的用法就是階層，就把他下面那一層塞進去{}裡面就好～
而 & —>就是指同階層的意思

//SCSS
.container{
	.content{
		blablabla
	}
	&:before{
		hahaha
	}
}

//CSS
.container>.content{
blablabla
}

.container::before{
hahaha
}

變數 - 重複利用變數，改樣式好輕鬆～

雖然CSS也有變數，但SCSS也很好用！在全域的地方宣告即可，不用多打什麼字～
但記得和其他CSS參數一起插入時，要使用#{}把變數匡起來

$color: rgb(255,255,255);

.container{
background: $color;
}

//官方案例
.icon-#{$name} {
background-image: url("/icons/#{$name}.svg");
position: absolute;
#{$top-or-bottom}: 0;
#{$left-or-right}: 0;
}

mixin - 多個變數組合重複利用！更強大

在JS裡面，我們可以透過混合來重複利用類別。JS mixin的用法
SCSS裡面也有一樣的用法：

//SCSS
@mixin transition{
  transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
}

.menu-icon_hamburger{
     border-radius: 5px;
     @include transition;
}

//轉譯 CSS

.menu-icon_hamburger {
  border-radius: 5px;
  transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

還可以把變數丟進去

@mixin flex($direction){
flex-direction: $direction;
}

header{
@include flex(column);
}

@extend - 繼承別人就不用努力寫樣式惹

當你需要使用另外一個class的樣式時，使用繼承的方式，就可以把他的樣式摳過來～

//scss
.button-basic  {
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

.button-blue  {
  @extend .button-basic;
  background-color: blue;
}

//CSS
.button-basic,.button-blue  {
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

.button-blue  {
  background-color: blue;
}

@for - 處理同類型元素好方便～

可以用for循環，來幫忙一次選取相同的元素～和做相同變量的變化
其他還有while / each等類似的功能，有興趣可以爬一下文件～

$base-color: #036;

@for $i from 1 through 3 {
  ul:nth-child(3n + #{$i}) {
    background-color: lighten($base-color, $i * 5%);
  }
}

@import - 分開管理再匯入真方便！

可以將SCSS變量和內容分開放置，才不會搞得一個文件落落長不好看～再用import的方法將他匯入到文件中。
另外可以在_.scss文件名稱前，加上下底線，告訴SCSS編譯器不用單獨編譯這個文件，這樣就不會有很多文件需要被匯入了。

文件： _list.scss

//可以省略下底線和.scss
@import "list";
...開始寫SCSS

其他

SCSS也可以使用清單，像陣列那樣使用

//官方案例
$sizes: 40px, 50px, 80px;

@each $size in $sizes {
  .icon-#{$size} {
    font-size: $size;
    height: $size;
    width: $size;
  }
}

還有很多好玩的功能再請大家自己去翻閱官方文件囉！

以上！

SCSS官方網站：https://sass-lang.com/ 可以再看更多SCSS的用法～

有任何錯誤或意見請批評指教