[Day 14] Sass - Lists

在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