在Day10的文章中有提到，Lists是指一個變數的值由多個值組成，這些值可以用底下的幾種方式隔開

//用逗號隔開
$list_name: values, separated, with, commas;

//用空格隔開
$list_name: values separated with spaces;

//在括號中用逗號隔開
$list_name: (values, in, parens, separated, with, commas);

//在括號中用空格隔開
$list_name: (values in parens separated with spaces);

//在方括號中用空格隔開
$list_name: [values in brackets separated with spaces];

無論想用哪種方式都可以，但整個Lists都要保持相同的方式就可以。

接下來介紹幾個常用的小工具:

nth()
可以把nth想成一個提取器，用來提取變數中的第n個值
舉個例子：
text-color我們共有三個變數#ffffff,orange,yellow
而我想使用orange這個顏色，就可以用nth提取第二個變數

$text-color: #ffffff,orange,yellow
.content
  color:nth($text-color,2)
            //引入變數,第二個

index()
剛剛的nth的使用方式是提取“第幾個變數”來知道“變數的值”，
而index則是提取“變數的值”來知道“第幾個變數”。
舉例來說：

$site: coffee,baseball,dvd
.content
  color:index($site,dvd)
            //引入變數,變數名稱

產生出來的code

.content{
  color: 3;
}

也就是提取“dvd”來知道“第三個”變數，
這樣的好處是可以與nth()一起搭配，
不管是換版型、或是要更改順序都能更加的方便快速！

再舉個nth()與index()搭配使用的例子：

$sites:coffee,cart,cloth,tea,child   //網站類型
$text-color:red,orange,yellow,green,blue //文字顏色
$bg:#fff,#000,#000,gray,#fff  //背景顏色
$style: index($sites,coffee)  //選擇coffee後 = $style:1
.box
  background: nth($bg,$style)
  color: nth($text-color,$style)

這樣子之後的樣式就都能直接取“第一個變數”，也就是“coffee”的相對應樣式了！

之後有時間再來聊聊更多相關的Lists用法，
希望大家能用得越來越上手喔！

參考資料：
https://www.koderhq.com/tutorial/sass/list/
https://ithelp.ithome.com.tw/articles/10135991