探索 Sass 3.3 中的 Maps - 文章教程

探索 Sass 3.3 中的 Maps

发布于 2021-08-18 字数 3500 浏览 802 评论 0

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

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

甜柠檬

这个人比较懒,什么都没有填写!

11 文章
2 评论
18998 人气
更多

推荐作者

魏剑帆

文章 0 评论 0

yanggwq

文章 0 评论 0

qq_c2gI5

文章 0 评论 0

qq_iQVWB

文章 0 评论 0