Sass函数列表函数_html/css_WEB-ITnose

列表函数简介

列表函数主要包括一些对列表参数的函数使用，主要包括以下几种：

      length($list)：返回一个列表的长度值；

      nth($list, $n)：返回一个列表中指定的某个标签值

      join($list1, $list2, [$separator])：将两个列给连接在一起，变成一个列表；

      append($list1, $val, [$separator])：将某个值放在列表的最后；

      zip($lists…)：将几个列表结合成一个多维的列表；

      index($list, $value)：返回一个值在列表中的位置值。

列表函数中的每个函数都有其独特的作用与功能

 

 

length()函数
length()函数主要用来返回一个列表中有几个值，简单点说就是返回列表清单中有多少个值：

1 >> length(10px)2 13 >> length(10px 20px (border 1px solid) 2em)4 45 >> 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 10px3 >> 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 40px3 >> join((blue,red),(#abc,#def))4 #0000ff, #ff0000, #aabbcc, #ddeeff5 >> 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, #ffa5003 >> 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, #ffa50011 >> join((blue, green),(red,orange),space)12 #0000ff #008000 #ff0000 #ffa50013 >> join(blue,(red,orange),comma)14 #0000ff, #ff0000, #ffa50015 >> join(blue,(red,orange),space)16 #0000ff #ff0000 #ffa50017 >> join(blue,(red orange),comma)18 #0000ff, #ff0000, #ffa50019 >> join(blue,(red orange),space)20 #0000ff #ff0000 #ffa500

 

 

 

append()函数
append()函数是用来将某个值插入到列表中，并且处于最末位。

1 >> append(10px 20px ,30px)2 10px 20px 30px3 >> append((10px,20px),30px)4 (10px, 20px, 30px)5 >> append(green,red)6 #008000 #ff00007 >> 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, #ff000011 >> 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 13 >> index(1px solid red, solid)4 25 >> index(1px solid red, red)6 3

在 index() 函数中，如果指定的值不在列表中（没有找到相应的值），那么返回的值将是 false，相反就会返回对应的值在列表中所处的位置。

1 >> index(1px solid red,dotted) //列表中没有找到 dotted2 false3 >> index(1px solid red,solid) //列表中找到 solid 值，并且返回他的位置值 24 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 true11 >> unitless(1 /2 + 2 )12 true13 >> 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 true11 >> comparable(2px,1mm)12 true13 >> comparable(2px,1rem)14 false15 >> 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 1px3 >> if(false,1px,2px)4 2px