探索Sass3.3中的Maps(一)

Sass的数据类型可以说是一个大家庭了,其数据类型中的数字、字符串、列表、颜色和布尔型,涵盖了大多数我们的需求。但是,正如一个框架开始的演变,在这个数据类型中还缺少一个关键性的工具:关联数组。

这里创建了一个变量$objects,并且给他赋了一个列表值。

$objects: (carrot, salt, chicken); 列表可以同时定义多个数据,但他不像数组一样有对应的key,没办法来分配上下文,也没有指数来索引这些数据。所以让我们看看如何创建一个关联数组(Sass中称之为Maps)。

这里有三个相同的值,对应添加了一个key,并且赋值给变量$objects。

$objects: (vegetable: carrot, mineral: salt, animal: chicken); 正如你所看到的,这个和列表长得非常的相似。你甚至可以在其上面执行列表相关的功能。这里变量$objects保存了三个值,每个值有一个对应的key。如果我们想要索引出salt值,我们并不需要知道他在哪个位置,我们只需要在传递其对应的key给map就行。

$just-a-pinch-of: map-get($objects, mineral); // $just-a-pinch-of == salt 为什么这是一种新的数据类型,他的存在真的有意义吗?我们来看一个示例。

管理变量 你应该很多次看到这样定义变量的方式:

$primary-nav-top-padding: .2em; $primary-nav-top-margin: .2em; $primary-nav-line-height: 1.3; $secondary-nav-background: white; $secondary-nav-color: black; Maps允许我们这样覆盖list:

$primary-nav: ( padding-top: .2em, margin-top: .2em, line-height: 1.3, ); $secondary-nav: ( background: white, color: black, ); 这是为每个变量创建一个简单的嵌套,这也可能使他们做为一组。

// Sass @mixin print-styles($map){ @each $property, $value in $map { #{$property}: $value; } } .primary-nav { @include print-styles($primary-nav); } // Outputted CSS .primary-nav { padding-top: .2em; margin-top: .2em; line-height: 1.3; } 进一步了解Maps 需要更多的变量吗?Maps可以保存任何数据类型,包括其他的Maps。

// Sass $primary-nav: ( padding-top: .2em, margin-top: .2em, line-height: 1.3, nav-item: ( color: white; is-expanded: ( padding-top: 1em, margin-top: 1em ) ) ); @mixin print-styles($map, $keys...){ $i: 1; $length: length($keys); @while $length >= $i { $map: map-get($map, nth($keys, $i)); $i: $i + 1; } @each $property, $value in $map { @if type-of($value) != map { #{$property}: $value; } } } nav.expanded { @include print-styles($primary-nav, nav-item, is-expanded); } print-styles的@mixin嵌套了一个Maps,并且向下遍历其每一个子Maps,直到使用完$keys。在这上面,他可以遍历每一个属性,并一个一个打印出来。

// Outputted CSS nav.expanded { padding-top: 1em, margin-top: 1em, } 每个单独的变量都可以是一个主导航或子导航的变异,而不要使用$main-navigation-nav-item-is-expanded-is-hovered-margin-top-on-the-blog-page。

在将来的一周,我们将看一个Maps的用例,使用map-get功能,从变量中调用变量。在此我们可以看看Brad Wade发表的文章《how the Department of Energy embraced Sass for their mobile strategy redesign》。

译者手语:整个翻译依照原文线路进行,并在翻译过程略加了个人对技术的理解。如果翻译有不对之处,还烦请同行朋友指点。谢谢!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏数据结构与算法

2729:Blah数集

2729:Blah数集 查看 提交 统计 提问 总时间限制:3000ms内存限制:65536kB描述大数学家高斯小时候偶然间发现一种有趣的自然数集合Blah,对...

2654
来自专栏深度学习自然语言处理

【python】命令行参数argparse用法详解

prog.py是我在linux下测试argparse的文件,放在/tmp目录下,其内容如下:

673
来自专栏前端说吧

Sass-学习笔记【进阶篇】

4108
来自专栏ml

NYOJ-----最少乘法次数

最少乘法次数 时间限制:1000 ms  |  内存限制:65535 KB 难度:3 描述 给你一个非零整数,让你求这个数的n次方,每次相乘的结果可以在后面使用...

26311
来自专栏前端说吧

Sass控制命令及函数知识整理

3396
来自专栏前端儿

SASS用法指南

SASS是ruby写的,所以要想将sass编译成css文件,就给配上ruby环境。

1002
来自专栏机器学习算法与Python学习

Python:numpy总结(4)

31、chr函数,获取指定的字符 例子: #获取指定的字符for i in range(65,70): print str(chr(i))...

3479
来自专栏ACM算法日常

交错字符串(动态规划)- leetcode 97

给定三个字符串 s1, s2, s3, 验证 s3 是否是由 s1 和 s2 交错组成的。

621
来自专栏Python小屋

Python使用超高效算法查找所有类似123-45-67+89=100的组合

问题描述:在123456789这9个数字中间插入任意多个+和-的组合,使得表达式的值为100,输出所有符合条件的表达式。 昨天发了一个暴力测试的方法来解决问题,...

2785
来自专栏数说戏聊

Python3分析CSV数据

with语句在语句结束时自动关闭文件对象。 使用csv模块reader函数创建文件读取对象filereader,读取输入文件中的行。 使用csv模块的wri...

721

扫码关注云+社区