探索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 条评论
登录 后参与评论

相关文章

来自专栏数说工作室

【SAS Says】基础篇:6. 开发数据(二)

如果你管着一份10000条的客户数据,有一天,老板拿着一个500人的表告诉你,这表上的500位客户的信息发生了变动,而且变动的变量很不规律,如客户102是收入发...

3153
来自专栏Golang语言社区

谁发明了Go?

谁发明了Go Go语言的设计和实现工作是由Google的一个研发小组以及来自世界各地的大量贡献者共同完成的。 动机 为什么要发明一门新语言? 在当今世界,编程语...

3634
来自专栏Python中文社区

Python时间处理完全手册

專 欄 ❈ gw1770df,Python中文社区专栏作者,从事Python开发工作,全栈工程师。 博客: https://word.gw1770df.cc ...

2196
来自专栏从流域到海域

《笨办法学Python》 第34课手记

《笨办法学Python》 第34课手记 本节课讲访问列表的元素,其实跟C中访问数组元素是一样的。 至于那道练习题,是为了让你熟记序数和基数在编程上的区别。这里就...

1835
来自专栏郭霖

Android数据库高手秘籍(六)——LitePal的修改和删除操作

在上一篇文章中,我们学会了使用LitePal进行存储数据的功能。确实,比起直接使用Android原生的API,LitePal明显简单方便了太多。那么,在增删改查...

2278
来自专栏互联网杂技

基础JavaScript装逼指南

本文秉承着 你看不懂是你sb,我写的代码就要牛逼 的理念来介绍一些js的装逼技巧。 下面的技巧,后三个,请谨慎用于团队项目中(主要考虑到可读性的问题),不然,l...

3175
来自专栏java一日一条

八成Java开发者解答不了的问题

几个月前,我们在一个小型网站上发布了一个称为Java“死亡竞赛”的新项目。测验发布后,超过20000位开发者参加了测验。网站以20道关于Java的多选题为主。我...

672
来自专栏架构说

单链表中头节点作用(深入理解)

今天QQ群里有人咨询一个问题 例如单链表中头节点作用 然后联想到做项目中解决core一个问题 虽然每天都在吃饭睡觉打豆豆,啥框架业务都不懂 解决了这一个...

2686
来自专栏数据结构与算法

带修改莫队算法

update in 2017.12.24: 以前写的≈shit,实在看不下去了,重写一遍 pre 很早之前就学习了莫队算法。 老师讲课的时候就提到过带修改莫...

2927
来自专栏java相关

数据库相关

1165

扫码关注云+社区