SCSS函数——Map
- SCSS函数——Map
- Map的简单声明
- Map取值
- 遍历Map获取值实现换肤效果
- 1. 设置用户可以选择的主题
- 2.创建主题需要颜色的Map集合
- 3.在使用SCSS文件中导入函数和Scss文件
- 4.构建一个themeCombine函数动态创建类名
- 5.使用@each对变量进行遍历
- Map函数
- 1.get()取值函数
- 2.deep-remove()/remove()去值函数
- 3.has-key()判存函数
- 4.keys()取全键函数
- 5.merge()/deep-merge()并值函数
- 6.set()设值函数
- 7.values()取全值函数
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...)
参数说明：
- param：map集合
- 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...)
参数说明：
- param：map集合
- 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...);
参数说明：
- param：map集合
- 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)
参数说明：
- param：map集合
示例：
$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)
参数说明：
- mainMap：主map
- 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)
参数说明：
- param：map集合
- keys…：表示可以传多个key，是map集合的key
- 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)
参数说明：
- param：map集合
示例：
$font-weights: ("regular": 400, "medium": 500, "bold": 700);
@debug map.values($font-weights); // 400, 500, 700
