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;
$color-weak-active: map.get($weak-colors, 'active', 'weak') !default;

遍历Map获取值实现换肤效果

现在有以下场景我们在写一个组件时设置了很多个主题但是主题的名称由用户传入我们也不知道用户会使用哪个主题此时我们要怎么做呢
解答其实我们这时候只要设置用户能够传入的主题然后通过遍历设置好于主题响应键的Map集合即可

1. 设置用户可以选择的主题

我们创建一个叫var.scss的文件
如下我设置了一个$themes的变量涵盖了各类的主题名称

$themes: theme-red ,  theme-green ,  theme-brown , theme-blue , theme-purple , theme-dark, theme-light,theme-glass;

2.创建主题需要颜色的Map集合

在var.scss中设置Map颜色集合

$theme-colors: (
    "theme-red": (
      "deepest": #99152b,
      "deeper":#c93f59,
      "deep":#e95d51,
      "base":#da6c7d,
      "weak":#f5aec0,
    ),
    "theme-green": (
      "deepest": #405449,
      "deeper":#517b5f,
      "deep":#96c9a5  ,
      "base":#75738f,
      "weak":#b7aebd,
    ),
    "theme-brown": (
      "deepest":#4e3227,
      "deeper":#695238,
      "deep":#947564,
      "base":#b1a196,
      "weak":#dcbfa2,
    ),
    "theme-blue": (
      "deepest": #3d445f,
      "deeper":#627581,
      "deep":#96a7be  ,
      "base":#adb3bc,
      "weak":#9d8798,
    ),
    "theme-purple": (
      "deepest":#44384c  ,
      "deeper":#72667c,
      "deep":#988ea4,
      "base":#9eafc6,
      "weak":#d1c5aa,
    ),
    "theme-dark": (
      "deepest":#1b2129  ,
      "deeper":#2b3242f9,
      "deep":#3e4654,
      "base":#414141,
      "weak":#898989,
    ),
    "theme-light": (
      "deepest":#e8e2e2f0  ,
      "deeper":#c6cfdb,
      "deep":#b2bbc7ea,
      "base":#b3c3c7f8,
      "weak":#b4b3b3,
    ),
    "theme-glass": (
      "deepest":#e8e2e260  ,
      "deeper":#c6cfdb55,
      "deep":#b2bbc7a3,
      "base":#b3c3c7bb,
      "weak":#b4b3b3bc,
    ),
);

3.在使用SCSS文件中导入函数和Scss文件

创建任意名称的scss文件后进行导入

@use './src/common/var.scss' as *;
@use 'sass:map';

4.构建一个themeCombine函数动态创建类名

以下我创建了一个themeCombine函数函数的作用就是动态产生Class名通过使用@content设置存放css属性的地方如果这个地方看不懂的话你需要再去好好学习以下scss的基础函数mixmin部分

@mixin themeCombine($component,$type){
  $themeName: $namespace+$common-separator+$component+$modifier-separator+$type;
  .#{$themeName}{
    @content;
   
  }
}

5.使用@each对变量进行遍历

我们通过使用@each遍历我们之前设置的$themes的变量然后通过@include themeCombine('dialog',$linkType)动态生成class名称只要对应上组件的class名称即可生效

@each $linkType in  $themes{
  @include themeCombine('dialog',$linkType){
    color: map.get($theme-colors, #{$linkType},'weak');
    }
}

Map函数

接下来我们系统的来看一下Sass的Map函数
注意需要使用Map函数必须要导入@use 'sass:map';

1.get()取值函数

说明用于通过key取得声明Map变量中的值
语法map.get(param,keys...)
参数说明

1. parammap集合
2. keys…表示可以传多个key是map集合的key

示例

$user:(
	"user1":"zhangsan",
	"user2":(
		"name":"lisi"
	)
)

map.get($user,"user1") //==> zhangsan
map.get($user,"user2","name") //==> lisi

2.deep-remove()/remove()去值函数

说明去除对应key的map中的键值对
语法map.deep-remove(param,keys...)/map.remove(param,keys...)
参数说明

1. parammap集合
2. keys…表示可以传多个key是map集合的key

示例

$font-weights: ("regular": 400, "medium": 500, "bold": 700);

@debug map.deep-remove($font-weights, "regular");
//==> ("medium": 500, "bold": 700)

3.has-key()判存函数

说明通过键判断键值对是否存在map中存在返回true否则false
语法map.has-key(param,keys...);
参数说明

1. parammap集合
2. keys…表示可以传多个key是map集合的key

示例

$fonts: (
  "Helvetica": (
    "weights": (
      "regular": 400,
      "medium": 500,
      "bold": 700
    )
  )
);

@debug map.has-key($fonts, "Helvetica", "weights", "regular"); // true
@debug map.has-key($fonts, "Helvetica", "colors"); // false

4.keys()取全键函数

说明获取map中所有的键
语法map.keys(param)
参数说明

1. parammap集合

示例

$font-weights: ("regular": 400, "medium": 500, "bold": 700);

@debug map.keys($font-weights); // "regular", "medium", "bold"

5.merge()/deep-merge()并值函数

说明将一个map合并到另一个map中
语法map.merge(mainMap,mergedMap)/map.deep-merge(mainMap,mergedMap)
参数说明

1. mainMap主map
2. mergedMap合并到主map的副map

示例

$fonts: (
  "Helvetica": (
    "weights": (
      "lightest": 100,
      "light": 300
    )
  )
);
$heavy-weights: ("medium": 500, "bold": 700);

@debug map.merge($fonts, "Helvetica", "weights", $heavy-weights);
// (
//   "Helvetica": (
//     "weights": (
//       "lightest": 100,
//       "light": 300,
//       "medium": 500,
//       "bold": 700
//     )
//   )
// )

6.set()设值函数

说明设置map中的值
语法map.set(param,keys...,value)
参数说明

1. parammap集合
2. keys…表示可以传多个key是map集合的key
3. value值

示例

$fonts: (
  "Helvetica": (
    "weights": (
      "regular": 400,
      "medium": 500,
      "bold": 700
    )
  )
);

@debug map.set($fonts, "Helvetica", "weights", "regular", 300);
// (
//   "Helvetica": (
//     "weights": (
//       "regular": 300,
//       "medium": 500,
//       "bold": 700
//     )
//   )
// )

7.values()取全值函数

说明获取map中所有的值
语法map.values(param)
参数说明

1. parammap集合

示例

$font-weights: ("regular": 400, "medium": 500, "bold": 700);

@debug map.values($font-weights); // 400, 500, 700