探索Sass3.3中的Maps(一)

发布于 大漠

本文由大漠根据Micah Godbolt的《Exploring Maps In Sass 3.3 (Part 1)》一文所译,整个译文带有我们自己的理解与思想,如果译得不好或不对之处还请同行朋友指点。如需转载此译文,需注明英文出处:http://www.phase2technology.com/blog/exploring-maps-in-sass-3-3,以及作者相关信息。

——作者:Micah Godbolt

——译者:大漠

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》。

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

如需转载烦请注明出处:

英文原文:http://www.phase2technology.com/blog/exploring-maps-in-sass-3-3/

中文译文:https://www.fedev.cn/preprocessor/exploring-maps-in-sass-3-3-part-1.html

Air Force 1 Foamposite