SCSS函数——Map

SCSS函数——Map

Map的简单声明

如下，我声明了一个变量$weak-color其中键是string类型的而值则又是一个map类型

$weak-colors: (
    "main": (
      "weak": #43464a,
    ),
    "info": (
      "weak": #80a7f0,
    ),
    "success": (
      "weak": #afedce,
    ),
    "fail": (
      "weak": #f6a3a3,
    ),
    "warn": (
      "weak": #fab49e,
    ),
    "default": (
      "weak": #616365,
    ),
    "active": (
      "weak": #f9d5a9,
    ),
);

接下来我们来看Map取值

Map取值

我们需要注意的是若你想要这样去取值的时候，我们需要映入sass:map函数
即：@use "sass:map";
之后我们则需要以变量的形式进行声明，通过使用map.get()函数进行取用，其中第一个参数是map的名称，第二个参数开始是map的键，通过键取到值

$color-weak-main: map.get($weak-colors, 'main', 'weak') !default;
$color-weak-success: map.get($weak-colors, 'success', 'weak') !default;
$color-weak-warn: map.get($weak-colors, 'warn', 'weak') !default;
$color-weak-fail: map.get($weak-colors, 'fail', 'weak') !default;
$color-weak-default: map.get($weak-colors, 'default', 'weak') !default;
$color-weak-info: map.get($weak-colors, 'info', 'weak') !default