map 与相关函数

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

map 就是列表项目带名字的列表 ... 也就是名/值对的列表。 我们可以使用项目的名字来找到它的对应的值。map 类型的数据,看起来像这个样子 ... 每个项目用逗号分隔开,项目有一个 key ,也就是项目的名字,还有对应的值 ... 名字与值之间可以使用一个冒号 ...

$map: (key1: value1, key2: value2, key3: value3);

下面,我们到 Sass 的交互上面去定义一个 map 类型的数据,还有去试一下跟 map 相关的函数 ... 打开命令行工具 ... 输入 sass -i ..

这里我们先去定义一个 map 类型的数据 ... 可以把它交给一个变量 .. .叫做 $colors ... 再用一组括号 ... 括号里面的东西就是 map 数据 ... 每个项目都有一个名字 ... 比如 light ... 对应的值是 #ffffff ... 逗号分隔一下 ... 再去添加其它的项目 ... dark: #000000

$colors: (light: #ffffff, dark: #000000)

回车 ... 现在我们就有一个了 map 类型的数据 ... ... 用在列表上的函数同样可以处理 map 类型的数据 ... 比如想查看一下这个 map 数据的项目数 .. 可以使用 length 函数 ...

length($colors)

回车 ... 结果是 2 ,表示 $colors 里面一共有两个项目 ... 下面,我们再看一下专门针对 map 类型的数据的相关函数 ... 使用 map-get 这个函数,可以根据项目的名字,我们可以得到对应的值 ...

输入 map-get() ... 这个函数有两个参数,第一个参数是要得到值的 map ,这里我们用 $colors 来表示 ... 逗号分隔一下 ... 再去指定它的第二个参数,也就是在 map 里面的项目的 key ... 比如我们要得到 $colors 里面的 dark 这个 key 对应的值 ... 这里输入 drak ... 回车 ... 结果就是 #000000 ...

再试一下 light 这个 key ... 得到的结果就是跟它对应的值 ... #ffffff

想得到一个 map 里面的所有项目的 key ,可以使用 map-keys 这个函数 ... map-keys ... 它只有一个参数,就是要得到所有 key 的 map 数据 ... 输入 colors ... 回车 ... 返回的结果是一个列表 ... 里面有两个项目,就是在 $colors 里面的所有项目的 key ...

map-keys($colors)

如果想找出 map 里面的所有的值,可以使用 map-values 函数 ... map-values($colors) ... 回车 ... 结果就是 $colors 这个 map 里面的所有的项目的值 ...

想要判断一个 map 数据里面是否有指定的 key 的项目 ... 用的是 map-has-key 这个函数 ... 输入 map-has-key ... 它的第一个参数是要判断的 map ,输入 $colors ... 第二个参数就是要判断的 key ... 我们先试一下 light ... 回车 ... 返回的结果是 true .. 说明在 $colors 这个 map 里面拥有 light 这个 key 的项目 ..

map-has-key($colors, light)

我们再随便试一个其它的 key ... map-has-key($colors, gray) ... 返回的结果是 false ...

把两个 map 合并到一块儿,可以使用 map-merge 函数 ... 输入 map-merge ... 它的两个参数就是要合并到一块儿的 map ... 先输入一个 $colors ... 后面再加上一个 map .. ($light-gray: #e5e5e5) ...

map-merge($colors, ($light-gray: #e5e5e5))

回车 ... 返回来的就是两个 map 合并到一块的结果 ...

我们可以把这个结果再交给 $colors 这个变量 ...

$colors: map-merge($colors, (light-gray: #e5e5e5))

再查看一下 $colors 这个变量 ... 现在它里面有三个项目 ... 想从 map 里面移除掉一些项目,用的是 map-remove 这个函数 ... 先输入 map-remove ... 它的第一个参数是要移除项目的 map ... 这里就是 $colors ... 然后是要移动掉的项目 ... 我们可以使用项目的 key 来表示 ... 想要移除掉多个项目,项目跟项目之间可以用逗号分隔开 ..

map-remove($colors, light, dark)

回车 ... 返回来结果就是去掉了 $colors 里面的 light 还有 dark 这两个项目之后的 map 数据 ...

http://sass-lang.com/documentation/Sass/Script/Functions.html#map-functions

map 与相关函数《 Sass 基础 》

统计

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

社会化网络

关于

微信订阅号

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