列表函数

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

列表有点像是其它程序语言里面的数组 ... 下面,我们在 Sass 的交互 Shell 里去试一下跟 List 相关的函数。 sass -i ... 想知道一个列表里面有多少个项目,可以使用 length 这个函数 ... 可以把要判断长度的列表直接交给这个函数 .. 或者也可以给它一个表示列表的变量 ... 这里我们直接在函数里面输入一个列表数据 ...

length(5px 10px)

回车 ... 结果是 2 ... 表示这个列表里面一共有两个项目 ... 再试一下 ... length(5px 10px 5px 0) ... 回车 ... 结果是 4 ... 这个列表里面有四个项目。

这个列表里的每个项目都有一个对应的序号,或者叫索引号,这个序号是从 1 开始的 ... 得到对应序号的列表里面的项目,可以使用 nth 这个函数 .. 输入 nth() ... 这个函数的第一个参数是一个列表 ... 第二个参数是列表项目的序号,比如我想要得到这个列表里的第一个项目,输入 1 ...

nth(5px 10px, 1)

返回的结果就是 5px ... 再试一下 ... 把序号设置成 2 ... 这次返回的就是这个列表里面的第二个项目.. 我们也可以判断出列表里的项目的序号,用的是 index 函数。

index(1px solid red, solid) ,函数有两个参数,第一个参数是列表,第二个参数是要判断位置的列表里的项目 ... 这里我们看一下 solid 在前面这个列表里的序号是多少 ... 结果是 2 ...

想往一个列表里面添加新的项目,用的是 append 函数 ... 第一个参数是要插入新项目的列表 ... 它的第二个参数就是要往列表里面插入的新的项目 ...

append(5px 10px, 5px) ... 回车 ... 结果就是 append 返回来的新的列表 ...

这个函数还有第三个参数,就是可以指定一下返回的列表的分隔符 ... 这个参数的值可以是 space ,comma ,或者 auto ...

要把两个列表组合成一个列表 ... 可以使用 join 函数 .. 输入 join ... 这个函数的前两个参数就是要组合到一块的列表 ... join(5px 10px, 5px 0) ... 结果就是组合到一块儿的这个新的列表 ... 另外这个函数还有第三个参数,就是列表用的分隔符,我们可以设置成 space 或者 comma ,也可以设置成 auto ...

我们再设置成 comma 看一下 ... 你会发现,得到的这个列表,项目跟项目之间会用逗号分隔开 ...

列表函数《 Sass 基础 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点