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