今日將介紹３種列表函數：
１. length()函數
２. nth()函數
３. join()函數

length()函數

返回一個列表的長度值，需用空格隔開。

例如：

// scss //
$width1: length(1);
div{
    width: $width1;
}

$width2: length(1 3);
div{
    width: $width2;
}

$width3: length(1 3px 5px);
div{
    width: $width3;
}

$width4: length(1em 3em 5px 7px);
div{
    width: $width4;
}

編｜
譯｜ 從以上程式碼得知數值也可加上單位。
後｜
　Ｖ

// css //
div {
  width: 1;
}

div {
  width: 2;
}

div {
  width: 3;
}

div {
  width: 4;
}

須注意不可加上逗號否則編譯將錯誤。

例如：

// scss //
$width5: length(1,3px,5px);
div{
    width: $width5;
}

編｜
譯｜ 逗號無法被讀取。
後｜
　Ｖ

Compilation Error
Error: Only 1 argument allowed, but 3 were passed.

nth()函數

語法：nth($list,$n)。 ($list:列出所有值。 $n:指定位置，需大於０。)
指定列表中某個位置的值。

例如：

// scss //
$width1: nth(1 3,1);
div{
    width: $width1;
}

$width2: nth(1 3 5%,3);
div{
    width: $width2;
}

$width3: nth((Helvetica,Arial,sans-serif),3);
div{
    width: $width3;
}

$width4: nth((1px solid red) border-top green,2);
div{
    width: $width4;
}

編｜
譯｜ 從 $width3 得知括號內加上逗號是可被讀取的。
後｜
　Ｖ

// css //
div {
  width: 1;
}

div {
  width: 5%;
}

div {
  width: sans-serif;
}

div {
  width: border-top;
}

須注意$n必須大於０否則編譯將錯誤。

例如：

// scss //
$width5: nth(1 3,0);
div{
    width: $width5;
}

編｜
譯｜ 沒有第０個位置。
後｜
　Ｖ

Compilation Error
Error: $n: List index may not be 0.

join()函數

只能將２個列表連接成１個列表。

例如：

// scss //
$width1: join(1 3,1 5);
div{
    width: $width1;
}

$width2: join((blue,red),(#abc,#def));
div{
    width: $width2;
}

編｜
譯｜ 從 $width2 得知括號內加上逗號是可被讀取的。
後｜
　Ｖ

// css //
div {
  width: 1 3 1 5;
}

div {
  width: blue red #abc #def;
}

＊若要將２個以上的列表連接成１個列表。

Ｏ正確寫法：

// scss //
$width3: join((ONE TWO), join((THREE FOUR),(FIVE SIX)));
div{
    width: $width3;
}

編｜
譯｜ 多個列表連接，需要將多個join()函數合併在一起使用。
後｜
　Ｖ

// css //
div {
  width: ONE TWO THREE FOUR FIVE SIX;
}

Ｘ錯誤寫法：

// scss //
$width4:  join((one two),(three, four),(five six));

div{
    width: $width4;
}

編｜
譯｜ 一個join()函數最多連接２個列表。
後｜
　Ｖ

Compilation Error
Error: $separator: five six is not a string.

＊join()函數中有個特別參數$separator，用來指定列表連接之間的分隔符的，默認爲auto，還有comma（逗號）和space（空格）。

例如：

// scss // //當第一個列表無逗號，第二個列表有逗號，有無設定$separator參數差別//
$width5: join((one two),(three ,four),auto);
div{
    width: $width5;
}

$width6: join((one two),(three ,four),comma);
div{
    width: $width6;
}

$width7: join((one two),(three ,four),space);
div{
    width: $width7;
}

編｜
譯｜ 明確指定$separator 參數，更不易混亂。
後｜
　Ｖ

// css //
div {
  width: one two three four;
}

div {
  width: one, two, three, four;
}

div {
  width: one two three four;
}