iT邦幫忙

2022 iThome 鐵人賽

DAY 25
0
Modern Web

菜鳥30日自學SASS及SCSS系列 第 25

【D-2 5】進階Sass的列表函數(2)

  • 分享至 

  • xImage
  •  

今日將介紹3種列表函數:
1. append()函數
2. zip()函數
3. index()函數

append()函數

將某個值插入到列表最末位

例如:

// scss //
$width1: append(10px 20px ,30px);
div{
    width: $width1;
}  
// 若列表中只有一個列表項時,那插入進來的值和原來的值會以【空格】 的方式分隔。//

$width2: append(10px 20px ,30px 40px);
div{
    width: $width2;
}  
// 若列表中的列表項是以【空格】分隔列表項,那插入進來列表項也將以【空格】分隔。//

$width3: append((10px,20px) ,30px 40px);
div{
    width: $width3;
}  
// 若列表中的列表項是以【逗號】分隔列表項,那插入進來列表項也將以【逗號】分隔。//

編|
譯| 若沒有明確的指定$separator參數值,其默認值是auto
後|
 V

// css //
div {
  width: 10px 20px 30px;
}

div {
  width: 10px 20px 30px 40px;
}

div {
  width: 10px, 20px, 30px 40px;
}

*參數$separator:用來指定列表連接之間的分隔符的。默認爲auto,指定有comma(逗號)space(空格)

例如:

// scss //
$width4: append((one two),three,comma); // 逗號 //
div{
    width: $width4;
}

$width5: append((one two),three,space); // 空格 //
div{
    width: $width5;
}

編|
譯| 明確指定$separator 參數,更不易混亂。
後|
 V

// css //
div {
  width: one, two, three; // 逗號 //
}

div {
  width: one two three; // 空格 //
}

zip()函數

將多個列表值轉成一個多維的列表。

例如:

// scss //
$width1: zip(one two three,1 2 3,frist second third);
div{
    width: $width1;
}

編|  List( )   nth(1)    nth(2)     nth(3)
譯|  List(1) | one   | two     | three
後|  List(2) | 1    | 2       | 3   
 V  List(3) V first   V second   V third

// css //
div {
  width: one 1 frist, two 2 second, three 3 third;
}

*使用zip()函數時,每個單一的列表個數值必須是相同的,否則會出錯。

例如:

// scss // 
$width2: zip(one two three,3,frist second third);
div{
    width: $width2;
}

編|  List( )   nth(1)    nth(2)     nth(3)
譯|  List(1) | one   | two     | three
後|  List(2) | 3    | X     | X
 V  List(3) V first   V second   V third

// css //
div {
  width: one 3 frist;
}

index()函數

找到某值在列表中的位置。

例如:

// scss // 
$width1: index(one two three,one);
div{
    width: $width1;
}

$width2:index(one two three,two);
div{
    width: $width2;
}

$width3:index(one two three,three);
div{
    width: $width3;
}

編|  
譯|  
後|  
 V  

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

div {
  width: 2;
}

div {
  width: 3;
}

當要找的值不在列表中,則返回false。

例如:

// scss //
$width4:index(one two three,four);
div{
    width: $width4;
}
Compilation Error
Error:false

上一篇
【D-2 4】進階Sass的列表函數(1)
下一篇
【D-2 6】進階Sass的Introspection()函數、Miscellaneous()函數
系列文
菜鳥30日自學SASS及SCSS30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言