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