sass列表函数

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

  •       length($list):返回一个列表的长度值;
  •       nth($list, $n):返回一个列表中指定的某个标签值
  •       join($list1, $list2, [$separator]):将两个列给连接在一起,变成一个列表;
  •       append($list1, $val, [$separator]):将某个值放在列表的最后;
  •       zip($lists…):将几个列表结合成一个多维的列表;
  •       index($list, $value):返回一个值在列表中的位置值。

>> length(10px)
1
>> length(10px 20px (border 1px solid) 2em)
4
>> length(border 1px solid)
3
length() 函数中的列表参数之间使用空格隔开,不能使用逗号,否则函数将会出错:



注:在 nth($list,$n) 函数中的 $n 必须是大于 0 的整数:


不过 join() 只能将 两个列表 连接成一个列表,如果直接连接两个以上的列表将会报错:


但很多时候不只碰到两个列表连接成一个列表,这个时候就需要将多个 join() 函数合并在一起使用:

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


在 join() 函数中还有一个很特别的参数 $separator,这个参数主要是用来给列表函数连接列表值是,使用的分隔符号,默认值为 auto。

join() 函数中 $separator 除了默认值 auto 之外,还有 comma 和 space 两个值,其中 comma 值指定列表中的列表项值之间使用逗号(,)分隔,space 值指定列表中的列表项值之间使用空格( )分隔。


>> join(blue,red,comma)
(#0000ff, #ff0000)
>> join(blue,red,space)
(#0000ff #ff0000)



(#ff0000 (#008000, #0000ff))

如果没有明确的指定 $separator 参数值,其默认值是 auto。

  • 如果列表只有一个列表项时,那么插入进来的值将和原来的值会以空格的方式分隔。
  • 如果列表中列表项是以空格分隔列表项,那么插入进来的列表项也将以空格分隔
  • 如果列表中列表项是以逗号分隔列表项,那么插入进来的列表项也将以逗号分隔

当然,在 append() 函数中,可以显示的设置 $separator 参数,

  • 如果取值为 comma 将会以逗号分隔列表项
  • 如果取值为 space 将会以空格分隔列表项

zip()函数将多个列表值转成一个多维的列表:

在使用zip()函数时,每个单一的列表个数值必须是相同的:

zip()函数中每个单一列表的值对应的取其相同位置值:



Introspection函数

Introspection 函数包括了几个判断型函数:

  • type-of($value):返回一个值的类型
  • unit($number):返回一个值的单位
  • unitless($number):判断一个值是否带有单位
  • comparable($number-1, $number-2):判断两个值是否可以做加、减和合并


type-of() 函数主要用来判断一个值是属于什么类型:

返回值:

  • number 为数值型。
  • string 为字符串型。
  • bool 为布尔型。
  • color 为颜色型。

unitless() 函数相对来说简单明了些,只是用来判断一个值是否带有单位,如果不带单位返回的值为 true,带单位返回的值为 false:



在这里把 Miscellaneous 函数称为三元条件函数,主要因为他和 JavaScript 中的三元判断非常的相似。他有两个值,当条件成立返回一种值,当条件不成立时返回另一种值:

if($condition,$if-true,$if-false)
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值