5_Sass Map(映射)函数 --[CSS预处理]
Sass 提供了一系列内置的函数来操作映射（Map），这些函数使得处理键值对数据变得非常方便。以下是 Sass 中常用的映射函数及其用法：1. map-get($map, $key)
map-get($map, $key) 函数用于从 Sass 映射中获取指定键的值。这是一个非常有用的功能，尤其是在你需要根据不同的条件动态设置样式时。
示例：利用 map-get() 设置字体大小
假设我们有一个映射来界说不同尺寸的字体，并希望在 CSS 中根据这个映射动态设置字体大小。
// 定义一个包含不同字体大小的映射
$font-sizes: (
small: 12px,
medium: 16px,
large: 24px,
x-large: 32px
);
// 使用 map-get() 函数从映射中获取字体大小并应用到样式规则中
body {
font-size: map-get($font-sizes, medium); // 返回 "16px"
}
h1 {
font-size: map-get($font-sizes, large); // 返回 "24px"
}
p {
font-size: map-get($font-sizes, small); // 返回 "12px"
}
编译后的 CSS
编译上述 SCSS 代码后，将得到如下 CSS：
body {
font-size: 16px;
}
h1 {
font-size: 24px;
}
p {
font-size: 12px;
}
在这个例子中，map-get() 函数乐成地从 $font-sizes 映射中提取了对应的字体大小，并将其应用于相应的选择器。
更多应用示例
你可以进一步利用 map-get() 函数结合其他 Sass 功能来实现更复杂的需求。比方，创建一个混合宏（mixin）以简化重复代码。
示例：创建一个基于映射的字体大小混合宏
// 定义一个包含不同字体大小的映射
$font-sizes: (
small: 12px,
medium: 16px,
large: 24px,
x-large: 32px
);
// 创建一个混合宏，接受一个关键字参数来设置字体大小
@mixin font-size($size) {
font-size: map-get($font-sizes, $size);
}
// 使用混合宏简化代码
body {
@include font-size(medium); // 返回 "16px"
}
h1 {
@include font-size(large); // 返回 "24px"
}
p {
@include font-size(small); // 返回 "12px"
}
https://i-blog.csdnimg.cn/direct/4a468195289248b89d8c3e941fcb2e8f.png#pic_center
这段代码将会编译成与上面相同的 CSS，但是通过利用混合宏，代码更加简洁和易于维护。
通过这个例子，你应该可以或许理解如何在 Sass 中利用 map-get($map, $key) 函数来从映射中获取特定键的值了。
2. map-merge($map1, $map2)
map-merge($map1, $map2) 函数用于将两个 Sass 映射归并成一个新的映射。如果有相同的键，后面的映射中的值会覆盖前面的映射中的值。这在需要动态组合或更新样式配置时非常有用。
示例：归并字体和颜色设置
假设我们有两个映射，一个包罗字体相关的设置，另一个包罗颜色相关的设置。我们希望将这两个映射归并，以便在 CSS 中利用这些设置。
// 定义字体设置映射
$font-settings: (
font-family: "Helvetica Neue",
font-size: 16px,
line-height: 1.5
);
// 定义颜色设置映射
$color-settings: (
color: #333,
background-color: #f8f8f8
);
// 使用 map-merge() 函数合并两个映射
$text-settings: map-merge($font-settings, $color-settings);
// 动态生成样式规则
body {
@each $key, $value in $text-settings {
#{$key}: $value;
}
}
编译后的 CSS
编译上述 SCSS 代码后，将得到如下 CSS：
body {
font-family: "Helvetica Neue";
font-size: 16px;
line-height: 1.5;
color: #333;
background-color: #f8f8f8;
}
https://i-blog.csdnimg.cn/direct/c9f44ff979d542e2a3812153050ef655.png#pic_center
在这个例子中，map-merge() 函数乐成地将 $font-settings 和 $color-settings 归并为一个新的映射 $text-settings，然后通过循环遍历这个新映射来设置 body 的样式属性。
3. map-remove($map, $keys...)
map-remove($map, $keys...) 函数用于从 Sass 映射中移除一个或多个键，并返回一个新的映射，原映射保持不变。这在需要动态调整样式配置时非常有用。
示例：从主题设置中移除不需要的属性
假设我们有一个包罗多种样式的主题映射，并希望创建一个简化版的主题，此中移除了某些特定的样式属性。
// 定义一个完整的主题设置映射
$theme: (
primary-color: #007bff,
secondary-color: #6c757d,
font-size: 16px,
line-height: 1.5,
padding: 1rem
);
// 使用 map-remove() 函数移除不需要的键
$simplified-theme: map-remove($theme, 'line-height', 'padding');
// 动态生成样式规则
body {
@each $key, $value in $simplified-theme {
#{$key}: $value;
}
}
编译后的 CSS
编译上述 SCSS 代码后，将得到如下 CSS：
body {
primary-color: #007bff;
secondary-color: #6c757d;
font-size: 16px;
}
https://i-blog.csdnimg.cn/direct/26f81774ab704330a8ae42d99d0412c5.png#pic_center
在这个例子中，map-remove() 函数乐成地从 $theme 映射中移除了 line-height 和 padding 键，创建了一个新的映射 $simplified-theme，并利用这个新映射来设置 body 的样式属性。请注意，在实际编译中，primary-color 和 secondary-color 不是有效的 CSS 属性，这里只是为了展示如何利用映射中的值。你可以在实际项目中利用这些值作为变量来设置有效的 CSS 属性。
4. map-keys($map)
map-keys($map) 是 Sass 中的一个内置函数，用于返回给定映射（Map）中所有键的列表。下面是一个利用 map-keys($map) 函数的例子：
// 定义一个包含不同尺寸和对应像素值的Sass映射
$sizes: (
small: 12px,
medium: 18px,
large: 24px
);
// 使用 map-keys 函数来获取映射中的所有键
$size-keys: map-keys($sizes);
// 将这些键应用到类选择器中
@each $key in $size-keys {
.#{$key}-text {
font-size: map-get($sizes, $key);
}
}
编译后的 CSS 代码将会是这样的：
.small-text {
font-size: 12px;
}
.medium-text {
font-size: 18px;
}
.large-text {
font-size: 24px;
}
https://i-blog.csdnimg.cn/direct/94494ba07393475b92de93e6f14c0add.png#pic_center
在这个例子中，我们起首界说了一个名为 $sizes 的 Sass 映射，它包罗了三个键值对。然后我们用 map-keys($sizes) 获取了这个映射中所有的键，并将结果存储在 $size-keys 变量中。接着，我们利用 @each 规则迭代 $size-keys 中的每一个键，并为每个键创建了一个对应的 CSS 类，此中字体大小属性是从原始映射 $sizes 中通过 map-get() 函数获取的。
5. map-values($map)
map-values($map) 是 Sass 中的一个内置函数，用于返回给定映射（Map）中所有值的列表。下面是两个利用 map-values($map) 函数的例子：
示例 1：根本用法
// 定义一个包含颜色名称和对应十六进制颜色代码的Sass映射
$colors: (
primary: #3498db,
secondary: #2ecc71,
tertiary: #e74c3c
);
// 使用 map-values 函数来获取映射中的所有值
$color-values: map-values($colors);
body {
// 将这些颜色应用到 body 的不同属性上
color: nth($color-values, 1); // primary 颜色
background-color: nth($color-values, 2); // secondary 颜色
}
// 创建带有背景色的类
@each $value in $color-values {
.bg-#{nth(map-keys($colors), index($color-values, $value))} {
background-color: $value;
}
}
编译后的 CSS 代码将会是这样的：
body {
color: #3498db;
background-color: #2ecc71;
}
.bg-primary {
background-color: #3498db;
}
.bg-secondary {
background-color: #2ecc71;
}
.bg-tertiary {
background-color: #e74c3c;
}
在这个例子中，我们界说了一个 $colors 映射，并通过 map-values() 获取了所有的颜色值。然后我们将第一个颜色设置为文本颜色，第二个颜色设置为背景颜色。同时，我们创建了一些 .bg-* 类，用于将映射中的颜色作为背景颜色。
示例 2：结合 media queries 利用
// 定义一个包含断点名称和对应宽度的Sass映射
$breakpoints: (
mobile: 320px,
tablet: 768px,
desktop: 1024px
);
// 使用 map-values 函数来获取映射中的所有值
$bp-values: map-values($breakpoints);
// 使用媒体查询生成响应式布局
@each $value in $bp-values {
@media (min-width: $value) {
.container {
width: nth($bp-values, index($bp-values, $value));
}
}
}
编译后的 CSS 代码将会是这样的：
@media (min-width: 320px) {
.container {
width: 320px;
}
}
@media (min-width: 768px) {
.container {
width: 768px;
}
}
@media (min-width: 1024px) {
.container {
width: 1024px;
}
}
https://i-blog.csdnimg.cn/direct/0a27e56f36e04adf9995f714e9bf39e6.png#pic_center
在第二个例子中，我们界说了一个 $breakpoints 映射，它包罗了不同的设备断点。然后我们利用 map-values() 来获取所有断点值，而且利用 @each 规则和 @media 查询为每个断点创建了相应式的 .container 类，确保容器的宽度根据视口宽度调整。
6. map-has-key($map, $key)
map-has-key($map, $key) 是 Sass 中的一个内置函数，用于检查给定的映射（Map）是否包罗特定键。该函数返回一个布尔值：如果映射中存在指定的键，则返回 true；否则返回 false。
以下是两个利用 map-has-key($map, $key) 函数的例子：
示例 1：根本用法
// 定义一个包含颜色名称和对应十六进制颜色代码的Sass映射
$colors: (
primary: #3498db,
secondary: #2ecc71,
tertiary: #e74c3c
);
// 检查是否存在 'primary' 键
@if map-has-key($colors, primary) {
.primary-text {
color: map-get($colors, primary);
}
}
// 检查是否存在 'quaternary' 键
@if not map-has-key($colors, quaternary) {
.default-text {
color: #000; // 如果没有定义 quaternary 颜色，则使用默认黑色
}
}
编译后的 CSS 代码将会是这样的：
.primary-text {
color: #3498db;
}
.default-text {
color: #000;
}
在这个例子中，我们起首界说了一个 $colors 映射，而且利用 map-has-key() 来检查映射中是否包罗特定的键。根据检查结果，我们有条件地创建了 .primary-text 和 .default-text 类。
示例 2：条件加载样式
// 定义一个包含主题设置的Sass映射
$themes: (
dark: (
background: #333,
text-color: #fff
),
light: (
background: #f5f5f5,
text-color: #333
)
);
// 定义当前的主题
$current-theme: dark;
// 使用 map-has-key 检查是否存在当前主题设置
@if map-has-key($themes, $current-theme) {
body {
background-color: map-get(map-get($themes, $current-theme), background);
color: map-get(map-get($themes, $current-theme), text-color);
}
} @else {
body {
background-color: #fff;
color: #000;
}
}
编译后的 CSS 代码将会是这样的：
body {
background-color: #333;
color: #fff;
}
https://i-blog.csdnimg.cn/direct/2ac64169f802492985455b3aa0e46def.png#pic_center
在这个例子中，我们界说了一个 $themes 映射，它包罗了不同主题的背景和文本颜色设置。我们还界说了一个变量 $current-theme 来表现当前所选的主题。然后我们利用 map-has-key() 来检查 $themes 映射中是否存在与 $current-theme 匹配的键。如果存在，我们就应用相应的主题样式；否则，我们将应用默认的白色背景和玄色文本颜色。
通过这些例子，你应该可以或许理解如何在 Sass 中利用映射函数来操作键值对数据了。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]