Sass函數--列表函數

列表函數簡介

列表函數主要包括一些對列表參數的函數使用，主要包括如下幾種：

•       length($list)：返回一個列表的長度值；
•       nth($list, $n)：返回一個列表中指定的某個標籤值
•       join($list1, $list2, [$separator])：將兩個列給鏈接在一塊兒，變成一個列表；
•       append($list1, $val, [$separator])：將某個值放在列表的最後；
•       zip($lists…)：將幾個列表結合成一個多維的列表；
•       index($list, $value)：返回一個值在列表中的位置值。

列表函數中的每一個函數都有其獨特的做用與功能

 

 

length()函數
length()函數主要用來返回一個列表中有幾個值，簡單點說就是返回列表清單中有多少個值：

1 >> length(10px) 2 1
3 >> length(10px 20px (border 1px solid) 2em) 4 4
5 >> length(border 1px solid) 6 3

length() 函數中的列表參數之間使用空格隔開，不能使用逗號，不然函數將會出錯：

1 >> length(10px,20px,(border 1px solid),2em) 2 SyntaxError: wrong number of arguments (4 for 1) for `length' 3 >> length(1,2px) 4 SyntaxError: wrong number of arguments (2 for 1) for `length'

 

 

 

nth()函數
語法：

nth($list,$n)

nth()函數用來指定列表中某個位置的值。在Sass中，nth()函數和其餘語言不一樣，1是指列表中的第一個標籤值，2是指列表中的第二個標籤值，依此類推。如：

1 >> nth(10px 20px 30px,1) 2 10px 3 >> nth((Helvetica,Arial,sans-serif),2) 4 "Arial" 5 >> nth((1px solid red) border-top green,1) 6 (1px "solid" #ff0000)

注：在 nth($list,$n) 函數中的 $n 必須是大於 0 的整數：

1 >> nth((1px solid red) border-top green 1 ,0) 2 SyntaxError: List index 0 must be a non-zero integer for `nth'

 

 

 

join()函數
join()函數是將兩個列表鏈接合併成一個列表。

1 >> join(10px 20px, 30px 40px) 2 10px 20px 30px 40px 3 >> join((blue,red),(#abc,#def)) 4 #0000ff, #ff0000, #aabbcc, #ddeeff 5 >> join((blue,red),(#abc #def)) 6 #0000ff, #ff0000, #aabbcc, #ddeeff

不過join()只能將兩個列表連城一個列表，若是直接鏈接兩個以上的列表將會報錯。
但不少時候不僅碰到兩個列表鏈接成一個列表，這個時候就須要將多個 join() 函數合併在一塊兒使用：

1 >> join((blue red), join((#abc #def),(#dee #eff))) 2 #0000ff #ff0000 #aabbcc #ddeeff #ddeeee #eeffff

但當第一個列表中只有一個列表項，那麼 join() 函數合併的列表項目中每一個列表項目之間使用的分隔符號會根據第二個列表項中使用的，若是第二列表項中使用是,分隔，則使用逗號分隔；若是第二列項之間使用的空格符，則使用空格分隔：

1 >> join(blue,(green, orange)) 2 #0000ff, #008000, #ffa500 3 >> join(blue,(green orange)) 4 #0000ff #008000 #ffa500

若是當兩個列表中的列表項小於1時，將會以空格分隔：

1 >> join(blue,red) 2 #0000ff #ff0000

何時會是用逗號分隔合併的列表項，何時是使用空格分隔合併的列表項，建議使用 join() 函數合併列表項的時候就明確指定 $separator 參數，用來指定合併的列表中使用什麼方式來分隔列表項：

 1 >> join(blue,red,comma)  2 #0000ff, #ff0000  3 >> join(blue,red,space)  4 #0000ff #ff0000  5 >> join((blue green),(red,orange),comma)  6 #0000ff, #008000, #ff0000, #ffa500  7 >> join((blue green),(red,orange),space)  8 #0000ff #008000 #ff0000 #ffa500  9 >> join((blue, green),(red,orange),comma) 10 #0000ff, #008000, #ff0000, #ffa500 11 >> join((blue, green),(red,orange),space) 12 #0000ff #008000 #ff0000 #ffa500 13 >> join(blue,(red,orange),comma) 14 #0000ff, #ff0000, #ffa500 15 >> join(blue,(red,orange),space) 16 #0000ff #ff0000 #ffa500 17 >> join(blue,(red orange),comma) 18 #0000ff, #ff0000, #ffa500 19 >> join(blue,(red orange),space) 20 #0000ff #ff0000 #ffa500

 

 

 

append()函數
append()函數是用來將某個值插入到列表中，而且處於最末位。

1 >> append(10px 20px ,30px) 2 10px 20px 30px 3 >> append((10px,20px),30px) 4 (10px, 20px, 30px) 5 >> append(green,red) 6 #008000 #ff0000 7 >> append(red,(green,blue)) 8 #ff0000 #008000, #0000ff

若是沒有明確的指定 $separator 參數值，其默認值是 auto。
若是列表只有一個列表項時，那麼插入進來的值將和原來的值會以空格的方式分隔。
若是列表中列表項是以空格分隔列表項，那麼插入進來的列表項也將以空格分隔；
若是列表中列表項是以逗號分隔列表項，那麼插入進來的列表項也將以逗號分隔。
在 append() 函數中，能夠顯示的設置 $separator 參數，
若是取值爲 comma 將會以逗號分隔列表項
若是取值爲 space 將會以空格分隔列表項

 1 >> append((blue green),red,comma)  2 #0000ff, #008000, #ff0000  3 >> append((blue green),red,space)  4 #0000ff #008000 #ff0000  5 >> append((blue, green),red,comma)  6 #0000ff, #008000, #ff0000  7 >> append((blue, green),red,space)  8 #0000ff #008000 #ff0000  9 >> append(blue,red,comma) 10 #0000ff, #ff0000 11 >> append(blue,red,space) 12 #0000ff #ff0000

 

 

 

 

zip()函數
zip()函數將多個列表值轉成一個多維的列表：

1 >> zip(1px 2px 3px,solid dashed dotted,green blue red) 2 1px "solid" #008000, 2px "dashed" #0000ff, 3px "dotted" #ff0000

在使用zip()函數時，每一個單一的列表個數值必須是相同的：
|--- List ---|--- nth(1) ---|--- nth(2) ---|--- nth(3) ---|
|------------|--------------|--------------|--------------|
| List1 | 1px | 2px | 3px |
|------------|--------------|--------------|--------------|
| List2 | solid | dashed | dotted |
|------------|--------------|--------------|--------------|
| List3 | green | blue | red |
|------------|--------------|--------------|--------------|
zip()函數組合出來就成了：

1px solid green, 2px dashed blue, 3px dotted red

 

 

 

index()函數
index() 函數相似於索引同樣，主要讓你找到某個值在列表中所處的位置。在 Sass 中，第一個值就是1，第二個值就是 2，依此類推：

1 >> index(1px solid red, 1px) 2 1 3 >> index(1px solid red, solid) 4 2 5 >> index(1px solid red, red) 6 3

在 index() 函數中，若是指定的值不在列表中（沒有找到相應的值），那麼返回的值將是 false，相反就會返回對應的值在列表中所處的位置。

1 >> index(1px solid red,dotted) //列表中沒有找到 dotted 2 false 3 >> index(1px solid red,solid) //列表中找到 solid 值，而且返回他的位置值 2 4 2

 

 

 

Introspection函數

Introspection函數包括了幾個判斷型函數：

• type-of($value)：返回一個值的類型
• unit($number)：返回一個值的單位；
• unitless($number)：判斷一個值是否帶有帶位
• comparable($number-1, $number-2)：判斷兩個值是否能夠作加、減和合並

 

 

 

Introspection 函數 -type-of()
type-of()函數主要用來判斷一個值是屬於什麼類型：

返回值：

• number 爲數值型。
• string 爲字符串型。
• bool 爲布爾型。
• color 爲顏色型。

 1 >> type-of(100)  2 "number"  3 >> type-of(100px)  4 "number"  5 >> type-of("asdf")  6 "string"  7 >> type-of(asdf)  8 "string"  9 >> type-of(true) 10 "bool" 11 >> type-of(false) 12 "bool" 13 >> type-of(#fff) 14 "color" 15 >> type-of(blue) 16 "color" 17 >> type-of(1 / 2 = 1) 18 "string"

 

 

 

unit()函數
unit() 函數主要是用來獲取一個值所使用的單位，碰到複雜的計算時，其能根據運算獲得一個「多單位組合」的值，不過只充許乘、除運算：

 1 >> unit(100)  2 ""  3 >> unit(100px)  4 "px"  5 >> unit(20%)  6 "%"  7 >> unit(1em)  8 "em"  9 >> unit(10px * 3em) 10 "em*px" 11 >> unit(10px / 3em) 12 "px/em" 13 >> unit(10px * 2em / 3cm / 1rem) 14 "em/rem"

但加、減碰到不一樣單位時，unit() 函數將會報錯，除 px 與 cm、mm 運算以外：

 1 >> unit(1px + 1cm)  2 "px"  3 >> unit(1px - 1cm)  4 "px"  5 >> unit(1px + 1mm)  6 "px"  7 >> unit(10px * 2em - 3cm / 1rem)  8 SyntaxError: Incompatible units: 'cm' and 'px*em'.  9 >> unit(10px * 2em - 1px / 1rem) 10 SyntaxError: Incompatible units: '' and 'em'. 11 >> unit(1px - 1em) 12 SyntaxError: Incompatible units: 'em' and 'px'. 13 >> unit(1px - 1rem) 14 SyntaxError: Incompatible units: 'rem' and 'px'. 15 >> unit(1px - 1%) 16 SyntaxError: Incompatible units: '%' and 'px'. 17 >> unit(1cm + 1em) 18 SyntaxError: Incompatible units: 'em' and 'cm'.

unit() 函數對於單位運算相對來講也沒有規律，並且有些單位也沒法整合成一個單位，對於咱們在 CSS 中運用中並不適合，好比：

1 >> unit(10px * 3em) 2 "em*px" 3 >> unit(10px / 3em) 4 "px/em" 5 >> unit(10px * 2em / 3cm / 1rem) 6 "em/rem"

上面運算出來的單位，對於在 CSS 中使用將是沒有任何意義的。

 

 

 

unitless()函數
unitless() 函數相對來講簡單明瞭些，只是用來判斷一個值是否帶有單位，若是不帶單位返回的值爲 true，帶單位返回的值爲 false：

 1 >> unitless(100)  2 true  3 >> unitless(100px)  4 false  5 >> unitless(100em)  6 false  7 >> unitless(100%)  8 false  9 >> unitless(1 /2 ) 10 true 11 >> unitless(1 /2 + 2 ) 12 true 13 >> unitless(1px /2 + 2 ) 14 false

代碼實現：用戶在調用混合宏時，若是用戶沒有給參數值加上單位，程序會自動加入單位。

 1 @mixin adjust-location($x, $y) {
 2  @if unitless($x) {  3  $x: 1px * $x;
 4     }
 5  @if unitless($y) { 
 6  $y: 1px * $y;
 7     }
 8  position: relative;  9  left: $x; 10  top: $y; 11 } 12 .botton{
13  @include adjust-location(20px, 30); 14 }

編譯過來的CSS：

1 .botton {
2  position: relative;
3  left: 20px;
4  top: 30px; 
5 }

 

 

 

comparable()函數
comparable()函數主要是用來判斷連個數是否能夠進行「加，減」以及「合併」。若是能夠返回的值爲true，若是不能夠返回的值是false:

 1 >> comparable(2px,1px)  2 true  3 >> comparable(2px,1%)  4 false  5 >> comparable(2px,1em)  6 false  7 >> comparable(2rem,1em)  8 false  9 >> comparable(2px,1cm) 10 true 11 >> comparable(2px,1mm) 12 true 13 >> comparable(2px,1rem) 14 false 15 >> comparable(2cm,1mm) 16 true

 

 

 

Miscellaneous函數
在這裏吧Miscellaneous函數稱爲三元條件函數，主要由於他和JavaScript中的三元判斷很是的類似。他有兩個值，當條件成立返回一種值，當條件不成立時返回另外一種值：

if($condition,$if-true,$if-false)

上面表達式的意思是當$condition條件成立時，返回的值爲 $if-true，不然返回的是 $if-false 值。

1 >> if(true,1px,2px) 2 1px 3 >> if(false,1px,2px) 4 2px