SCSS list 列表

如果學習過JavaScript，那麼就很好理解scss中的list。

scss中的list類似於JavaScript陣列，下面就介紹一下list列表的用法。

[Scss] 純文字檢視 複製程式碼
$list: ();

上面的程式碼建立一個空的列表。

列表分隔符:

[Scss] 純文字檢視 複製程式碼
$list-space: "item-1" "item-2" "item-3";
$list-space: "item-1","item-2","item-3";

列表項與項之間可以用空格或者逗號分隔。

列表的規則如下:

（1）.除非列表太長不能寫在80字元寬度的單行中，否則應該始終單行顯示。

（2）.除非適用於CSS，否則應該始終使用逗號作為分隔符。

（3）.除非為空或者巢狀在另一個列表中，否則始終不要使用括號。

（4）始終不要新增尾部的逗號。

程式碼例項如下:

[Scss] 純文字檢視 複製程式碼
// 建議不要換行
$font-stack: 'Helvetica', 'Arial', sans-serif;
//換行不推薦
$font-stack:
  'Helvetica',
  'Arial',
  sans-serif;
     
// 不推薦使用空格分隔
$font-stack: 'Helvetica' 'Arial' sans-serif;
// 不推薦使使用括號，除非出現列表的巢狀
$font-stack: ('Helvetica', 'Arial', sans-serif);
// 最後一項不推薦新增逗號
$font-stack: ('Helvetica', 'Arial', sans-serif,);

列表巢狀:

[Scss] 純文字檢視 複製程式碼
$list: ( 
  ("item-1.1", "item-1.2", "item-1.3"), 
  ("item-2.1", "item-2.2", "item-2.3"),
  ("item-3.1", "item-3.2", "item-3.3")
);
 
$list: "item-1.1" "item-1.2" "item-1.3", 
       "item-2.1" "item-2.2" "item-2.3",
       "item-3.1" "item-3.2" "item-3.3";

列表巢狀推薦使用小括號。

特別說明:列表第一項的索引是1，而不是0，這一點和javascript陣列不同。

[Scss] 純文字檢視 複製程式碼
$list:"antzone",2,"softwhy.com";
.div {
  content: nth($list,1);
}

上面的程式碼編譯成css程式碼如下:

[CSS] 純文字檢視 複製程式碼
.div {
  content: "antzone"; 
}

操作列表的函式:

（1）.length($list)：返回一個列表的長度值。

（2）.nth($list, $n)：返回一個列表中指定的某個標籤值。

（3）.join($list1, $list2, [$separator])：將兩個列給連線在一起，變成一個列表。

（4）.append($list1, $val, [$separator])：將某個值放在列表的最後。

（5）.zip($lists…)：將幾個列表結合成一個多維的列表。

（6）.index($list, $value)：返回一個值在列表中的位置值。