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

相关文章

来自专栏HTML5学堂

面向对象系列讲解—面向对象的含义&工厂模式

HTML5学堂:在上一篇文章当中,我们把对象进行了基本的解释,本文当中,我将为大家解释什么是面向对象?为何要使用面向对象,而不用面向过程,面向对象又有什么好处,...

2826
来自专栏较真的前端

新手们容易在Promise上挖的坑~

2035
来自专栏Golang语言社区

Golang 中 for-loop 和 goroutine 的问题

00. 背景 最近在学习MIT的分布式课程6.824的过程中,使用Go实现Raft协议时遇到了一些问题。参见如下代码: for i := 0; i < len(...

3987
来自专栏IMWeb前端团队

创建script、link标签,预加载js/css方法createStaticResourceElement(CSRE)

# 代码 create-static-resource.js /** * Created by Capricorncd 2017-09-25 * https...

2456
来自专栏醒者呆

基础大扫荡——背包,栈,队列,链表一口气全弄懂

提到数据结构,不得不说数据类型,有人将他们比作分子和原子的关系,我们都知道大自然最小的构成单位是原子,数据类型描述的是原子的内部,如质子、中子的情况,而数据结构...

37115
来自专栏xingoo, 一个梦想做发明家的程序员

【AngularJS】—— 1 初识AngularJs

怀着激动与忐忑的心情,开始了学习AngularJS的旅程,很久之前就听说了这个前端框架,但是由于自己一直没有从事相关的工作,因此也没有进行学习。这次正好学习...

1819
来自专栏walterlv - 吕毅的博客

为什么委托的减法(- 或 -=)可能出现非预期的结果?(Delegate Subtraction Has Unpredictable Result)

2017-12-28 02:03

511
来自专栏前端黑板报

译《ES6的6个小特性》

Six Tiny But Awesome ES6 Features.md JS社区的每个人都喜欢新的API、语法以及一些简单、明了更高效的完成重要任务的新特性...

1855
来自专栏Java爬坑系列

【JAVA零基础入门系列】Day14 Java对象的克隆

  今天要介绍一个概念,对象的克隆。本篇有一定难度,请先做好心理准备。看不懂的话可以多看两遍,还是不懂的话,可以在下方留言,我会看情况进行修改和补充。   克隆...

1936
来自专栏高性能服务器开发

写给新手们看的编程修养

什么是好的程序员?是不是懂得很多技术细节?还是懂底层编程?还是编程速度比较快?我觉得都不是。对于一些技术细节来说和底层的技术,只要看帮助,查资料就能找到,对于速...

983

扫码关注云+社区